title: JQuery UI Dialog Shows "Dialog Div" before Displaying
body: <p>I have a JQuery UI dialog that auto opens when a user comes to my site so we can show an "Under Construction" dialog modally. Here is the code for the dialog:</p>
  
  <pre><code>    var $dialog = $('#dialog');
  if ($.cookie("MySitePreviewCookie") != "firstView")
   $(function () {
     $.cookie("MySitePreviewCookie", "firstView", { expires: 180, path: '/' });
     // Show Dialog Div
     $dialog.dialog({
       autoOpen: true,
       resizable: false,
       modal: true,
       width: 600,
       buttons: {
         "Skip This": function () {
           $(this).dialog("close");
         }
       }
     });
    });
  else
    $(function () {
       // HIDE Dialog Div 
       $dialog.dialog({
       autoOpen: false,
       resizable: false,
       modal: true,
       width: 600,
       buttons: {
         "Skip This": function () {
          $(this).dialog("close");
         }
       }
     });
   });
  </code></pre>
  
  <p>Here is the dialog markup:</p>
  
  <pre><code> &lt;div id="dialog" title="Welcome to MySite" class="dialogStyles"&gt;
     &lt;p&gt;
     Our site is still under construction but please look around and get a feel for what
     we plan to offer. If you would like to sign-up for our newsletter, please enter
     your email address below and click the &lt;strong&gt;Sign-up for Newsletter&lt;/strong&gt; button.
     &lt;/p&gt;
     &lt;p class="validateTips"&gt;&lt;/p&gt;
     &lt;br /&gt;
     &lt;input type="text" id="ccEmailAddress" name="ccEmailAddress" class="required email"
        style="width: 250px" /&gt;
     &amp;nbsp; &amp;nbsp;&lt;input id="btnAddNewsletter" class="submit" type="submit" value="Sign-    up    for Newsletter" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The dialog works great. I have CSS to style it and it looks great, except the fact that when the page first loads there are a bunch of image that the page it is displaying behind it (home page) is loading. It shows the  (which is located at the very bottom of the page) and then the dialog shows up and all is well. How can I get it to stop showing the DIV on the page and not effect the dialog?</p>