Jquery UI 对话框.. 主页上的对话框内容加载答案

【问题标题】：Jquery UI dialog box.. dialog box content loading on main pageJquery UI 对话框.. 主页上的对话框内容加载
【发布时间】：2011-12-22 21:17:24
【问题描述】：

我正在像这样激活一个对话框：

   $('a#addNew').click(function(){
   $('#popup').dialog({
       minWidth:  700,
       title:     'Select a product item'
   });
});

<div id="popup" style="color:#fff; background:#000; width:650px;">
    blah blah blah blah
</div>

这一切都很好.. 但是对话框（#popup）实际上显示在我的页面上，直到我单击#addNew，在这种情况下它消失并转移到实际的对话框。我只希望用户在单击#addNew 时看到该信息。我不希望它坐在页面上。我在这里做错了什么？

【问题讨论】：

标签： javascript jquery jquery-ui dialog modal-dialog

【解决方案1】：

<div id="popup" style="color:#fff; background:#000; width:650px; display:none;">
    blah blah blah blah
</div>

您需要在页面上隐藏此 div。然后对话框将取消隐藏并为您显示。

【讨论】：

我会更进一步；而不是内联样式，将其移至 CSS 样式表。但这是正确的想法。
哦是的.. duh。我不知道它会自动为我取消隐藏。
是的，我知道内联样式不受欢迎。在我构建页面时现在很容易。
当心，现在很容易，但是当您的页面几乎完成并且您查看所有内联样式时，您现在必须将其重构为样式表，您可能会因为不只是从一开始就这样做而自责.

【解决方案2】：

使用css添加
显示：无；

或使用 JQuery 添加
$('#popup').hide();

【讨论】：

【解决方案3】：

它在主页上因为那是你放它的地方！

您需要在第一次创建 div (css - display: none) 时隐藏它。

【讨论】：