CODEWITHSUNDEEP
jquery-uidialog
Shannon Dunn
Shannon Dunn

Reputation: 21

JQuery UI Dialog Shows "Dialog Div" before Displaying

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:

    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");
       }
     }
   });
 });

Here is the dialog markup:

 <div id="dialog" title="Welcome to MySite" class="dialogStyles">
   <p>
   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 <strong>Sign-up for Newsletter</strong> button.
   </p>
   <p class="validateTips"></p>
   <br />
   <input type="text" id="ccEmailAddress" name="ccEmailAddress" class="required email"
      style="width: 250px" />
   &nbsp; &nbsp;<input id="btnAddNewsletter" class="submit" type="submit" value="Sign-    up    for Newsletter" />
</div>

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?

Upvotes: 2

Views: 4027

Answers (1)

Rex Charles
Rex Charles

Reputation: 1369

There is not really a direct answer to this question, so to make it easier and hopefully those who are browsing for an answer similar to this, this will fit your situation. Zod is correct...using <style type="text/css"> .dialog {display:none}</style> will prevent any input or text in the dialog from showing on the page early. Also, using "document ready" should help prevent the document from showing anything until all that needs to be loaded is ready.

Upvotes: 1

Related Questions