Jquery dialog: content shown before the dialog is open

Question

I have some HTML code with a dialog inside, like this:

<center>
<a href="#add_auto" id="add_auto" onclick="addAuto();" >
    <img " src="/css/images/add_author_automated.png"; id="add_author_automated"; alt="-"; />
</a>
</center>
<div id="dialog-modal" title="Basic modal dialog" >
    <textarea style="width: 95%; heigth: 400px" name="authors-auto-adding"; id="authors-auto-adding"></textarea>
    <input text-align="center" type="BUTTON" onclick="processAuthorsParagraph();" value="Process";  />
</div>

When the image is clicked, I am callig the function addAuto:

function addAuto()
{
    $( "#dialog-modal" ).dialog({
        height: 300,
        width: 800,
        modal: true
    });
}

But the problem is that the first time the page is opened, I have the dialog content in on the main page. When I open the dialog and then close, the dilog content disapears from the main page.

I have try to use

$( "#dialog:ui-dialog" ).dialog( "destroy" );

in the document.ready but nothing changes.

thank you for your help.

Answer 1

Just put style="display: none" in the tags of the <div>

When the dialog is shown the style will be removed.