The modal dialog will not be hidden when the page loads.

Question

I am trying to create a modal dialog to just show content (e.g. html):

<script> $.fx.speeds._default = 1000; $(function() { $( "#dialog" ).dialog({ autoOpen: false, closeOnEscape: true, modal: true, position: 'center', width: 800, height: 600, show: "blind", hide: "explode" }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); return false; }); }); </script> 

When I view the page, the dialog is embedded and not hidden. Here is my html:

 <div id="dialog">This is my dialog that should be hidden until called</div> <button id="opener">I Open the Dialog</button> 

What am I doing wrong?

Answer 1

Hide div using css for example:

 <div id="dialog" style="display:none;">This is my dialog that should be hidden until called</div> 

Now it will be displayed only when called.

Answer 2

You must set the autoOpen property to false, below is the link

http://jqueryui.com/demos/dialog/#option-autoOpen

Here is an example

 $(function() { $( "#dialog" ).dialog({ closeOnEscape: true, modal: true, position: 'top', width: 800, height: 600, show: "blind", hide: "explode", autoOpen: false ///added this line }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); return false; }); });