javascript jQuery 对话框是否默认显示为隐藏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10296628/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does jQuery dialog display as hidden by default?
提问by IAmYourFaja
I am using jQuery dialog in a simple, typical use case:
我在一个简单的典型用例中使用 jQuery 对话框：
In the Javascript:
在 JavaScript 中：
$('myDialog').dialog({
modal: true;
});
In HTML:
在 HTML 中：
<div id="myDialog" title="Dialog Title">
Dialog contents here
</div>
However, the CSS I'm using to control the layout & look-and-feel of the myDialogdiv is hosted on a server that my local machine doesn't have access to (don't ask why). Ergo, in Firebug, I see a network 404 error of file not found for the CSS file.
但是，我用来控制myDialogdiv的布局和外观的 CSS托管在我的本地计算机无法访问的服务器上（不要问为什么）。因此，在 Firebug 中，我看到 CSS 文件找不到文件的网络 404 错误。
When I test this dialog out locally, it displays perfectly fine. However I just noticed that the contents of the myDialogdiv are actually displayed on my HTML page priorto when the code that executes the dialog's invocation is triggered.
当我在本地测试这个对话框时，它显示得非常好。但是我刚刚注意到，在触发执行对话框调用的代码之前，myDialogdiv的内容实际上显示在我的 HTML 页面上。
So, this leads me to believe one of two things:
所以，这让我相信两件事之一：
- A jQuery dialog's respective
<div>element is invisible/hidden by default; however this weird situation where the browser can't find the CSS file is causing the<div>to display to the user before the dialog even pops up on screen; or - A jQuery dialog's respective
<div>element is visible by default, and that I must take action to hide it on page load
<div>默认情况下，jQuery 对话框的相应元素是不可见/隐藏的；然而，这种浏览器找不到 CSS 文件的奇怪情况导致<div>对话框甚至在屏幕上弹出之前就显示给用户；或者<div>默认情况下，jQuery 对话框的相应元素是可见的，我必须在页面加载时采取措施将其隐藏
Can someone please tell me which of those two assertions are correct?
谁能告诉我这两个断言中哪一个是正确的？
If the former assertion is correct, then the problem shouldresolve itself when we push the code to our dev environment (which doeshave access to the CSS file).
如果前一个断言是正确的，那么当我们将代码推送到我们的开发环境（它确实可以访问 CSS 文件）时，问题应该会自行解决。
If the latter assertion is correct, then how can I hide the myDialogdiv on page load?
如果后一个断言是正确的，那么如何myDialog在页面加载时隐藏div？
Thanks in advance!
提前致谢！
回答by Jon
The second is more or less correct. When the page loads the <div>is visible because by default all <div>s in HTML are visible. jQuery only comes along for the ride later.
第二个或多或少是正确的。当页面加载时<div>可见，因为默认情况下<div>HTML 中的所有s 都是可见的。jQuery 只会在以后出现。
You should simply make the <div>hidden by default, and let .dialogdecide when to show it, for example:
您应该简单地<div>默认隐藏，然后.dialog决定何时显示它，例如：
CSS:
CSS：
.hidden { display: none }
HTML:
HTML：
<div id="myDialog" class="hidden" title="Dialog Title">
Dialog contents here
</div>
If you don't do this then things would deteriorate from "undesirable" to "unacceptable" if the dialog was not supposed to open immediately on page load. See an example.
如果你不这样做，那么如果对话框不应该在页面加载时立即打开，事情就会从“不受欢迎”恶化到“不可接受”。请参阅示例。
回答by Boris
You can set the autoOpen option to be false.
您可以将 autoOpen 选项设置为 false。
$('foo').dialog({
autoOpen: false,
title: 'I\'m hidden',
width: 500,
height: 500
});
回答by Bart Vangeneugden
Your second assertion is right. Calling .dialog()on a div, shows the dialog immediately
你的第二个断言是对的。调用.dialog()一个 div，立即显示对话框
