JQuery UI Dialog在显示前显示“Dialog Div”答案

【问题标题】：JQuery UI Dialog Shows "Dialog Div" before DisplayingJQuery UI Dialog在显示前显示“Dialog Div”
【发布时间】：2010-11-19 18:34:30
【问题描述】：

我有一个 JQuery UI 对话框，当用户访问我的网站时会自动打开，因此我们可以模态显示“正在建设”对话框。这是对话框的代码：

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

这是对话框标记：

 <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>

对话框效果很好。我有 CSS 来设置它的样式，它看起来很棒，除了当页面第一次加载时有一堆图像显示在它后面的页面（主页）正在加载。它显示（位于页面的最底部），然后出现对话框，一切都很好。如何让它停止在页面上显示 DIV 而不影响对话框？

【问题讨论】：

你用过style="display:none"
出于好奇，如果您不打算显示它，为什么要创建一个对话框（我假设您只想在站点的第一个视图中显示它）？你甚至需要else 声明吗？
你不想在页面加载时显示
哇，我就知道这很愚蠢。我想知道为什么我见过的演示从未显示过这个设置或在他们的样式表中。非常感谢！

标签： jquery-ui dialog

【解决方案1】：

这个问题并没有真正的直接答案，所以为了更容易，希望那些正在浏览与此类似的答案的人，这将适合您的情况。 Zod 是正确的...使用<style type="text/css"> .dialog {display:none}</style> 将阻止对话框中的任何输入或文本提前显示在页面上。此外，使用“文档就绪”应该有助于防止文档显示任何内容，直到所有需要加载的内容都准备好。

【讨论】：