javascript - jQuery 对话框是否默认显示为隐藏？

Question

我在一个简单的典型用例中使用 jQuery 对话框：

在 Javascript 中：

$('myDialog').dialog({
    modal: true;
});

在 HTML 中：

<div id="myDialog" title="Dialog Title">
    Dialog contents here
</div>

但是，我用来控制 div 的布局和外观的 CSSmyDialog托管在我的本地计算机无法访问的服务器上（不要问为什么）。因此，在 Firebug 中，我看到 CSS 文件找不到文件的网络 404 错误。

当我在本地测试此对话框时，它显示得非常好。但是我刚刚注意到，在触发执行对话框调用的代码之前myDialog， div 的内容实际上显示在我的 HTML 页面上。

所以，这让我相信两件事之一：

默认情况下， jQuery 对话框的相应<div>元素是不可见/隐藏的；然而，浏览器找不到 CSS 文件的这种奇怪情况导致<div>在对话框甚至在屏幕上弹出之前就显示给用户；或者
默认情况下， jQuery 对话框的相应<div>元素是可见的，我必须采取措施在页面加载时隐藏它

谁能告诉我这两个断言中哪一个是正确的？

如果前一个断言是正确的，那么当我们将代码推送到我们的开发环境（它确实可以访问 CSS 文件）时，问题应该会自行解决。

如果后一个断言是正确的，那么如何myDialog在页面加载时隐藏 div？

提前致谢！

score 13 · Accepted Answer

第二个或多或少是正确的。当页面加载时<div>是可见的，因为默认情况下<div>HTML 中的所有 s 都是可见的。jQuery 只是后来才出现的。

您应该简单地<div>默认隐藏，并.dialog决定何时显示它，例如：

CSS：

.hidden { display: none }

HTML：

<div id="myDialog" class="hidden" title="Dialog Title">
    Dialog contents here
</div>

如果您不这样做，那么如果对话框不应该在页面加载时立即打开，事情就会从“不受欢迎”恶化到“不可接受”。看一个例子。

score 1 · Accepted Answer

您可以将 autoOpen 选项设置为 false。

$('foo').dialog({
    autoOpen: false,
    title: 'I\'m hidden',
    width: 500,
    height: 500
});

score 0 · Accepted Answer

0

你的第二个断言是正确的。调用.dialog()div，立即显示对话框

于 2012-04-24T11:05:51.883 回答

3 回答 3