默认情况下，jQuery对话框是否显示为隐藏

Does jQuery dialog display as hidden by default?

本文关键字：显示 隐藏 是否 对话框 情况下 jQuery 默认      更新时间：2023-09-26

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

在 Javascript 中：

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

在 HTML 中：

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

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

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

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

  • 默认情况下，jQuery对话框各自的<div>元素是不可见/隐藏的;但是，浏览器找不到CSS文件的这种奇怪情况导致<div>在对话框弹出屏幕之前向用户显示;或
  • 默认情况下，jQuery 对话框各自的 <div> 元素是可见的，我必须在页面加载时采取措施将其隐藏

有人可以告诉我这两个断言中的哪一个是正确的吗？

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

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

提前感谢！

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

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

.CSS：

.hidden { display: none }

.HTML：

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

如果您不这样做，那么如果对话框不应该在页面加载时立即打开，那么事情就会从"不受欢迎"恶化到"不可接受"。请参阅示例。

您可以将自动打开选项设置为 false。

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

你的第二个断言是对的。在div 上调用.dialog()会立即显示对话框

相关文章：