C# DIV 内容显示在页面上而不是 JQuery 对话框上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/667841/
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
DIV content shows on page instead of JQuery Dialog
提问by Xaisoft
I have the following DIV markup:
我有以下 DIV 标记：
<div id="dialog" title="Membership Renewal">
Your membership is going to expire.
</div>
I have the following javascript to execute the JQuery:
我有以下 javascript 来执行 JQuery：
<script type="text/javascript">
function showjQueryDialog() {
$("#dialog").dialog("open");
//alert("Time to renew Membership!");
}
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: { "Renew Membership": function() { $(this).dialog("close"); } }
});
});
</script>
I have an asp:Button which is inside a control and the control is on a master page. The first thing I notice is that when the page is loaded, the div is displayed and then disappears when the page is done loading. When I click the button it executes the following:
我有一个 asp:Button，它位于控件内，而该控件位于母版页上。我注意到的第一件事是，当页面加载时，div 显示，然后在页面加载完成后消失。当我单击按钮时，它会执行以下操作：
if (timeSpan.Days >= 30)
{
//Show JQuery Dialog Here
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "showExpiration",
"showjQueryDialog()", true);
}
When I click the button, instead of a dialog popping up, the content of the div just becomes visible.
当我单击按钮时，不是弹出对话框，而是 div 的内容变得可见。
采纳答案by Jeromy Irvine
I believe you have two related issues here.
我相信你在这里有两个相关的问题。
The reason that the DIV is showing when you first load is because you haven't yet told it not to. The jQuery script that makes the DIV behave as a dialog doesn't run until the HTML DOM is loaded, and until then it will not hide the DIV. A simple solution is to hide the DIV by default using CSS.
DIV 在您第一次加载时显示的原因是因为您还没有告诉它不要。使 DIV 表现为对话框的 jQuery 脚本在加载 HTML DOM 之前不会运行，并且在此之前它不会隐藏 DIV。一个简单的解决方案是默认使用 CSS 隐藏 DIV。
<div id="dialog" title="Membership Renewal" style="display:none;">
Your membership is going to expire.
</div>
The button click problem is related: RegisterClientScriptBlockwill output a script that runs as soon as it is encountered, so the jQuery code that turns it into a dialog hasn't had a chance to run yet. In order to give it a chance to do so, you can change the C# code to use RegisterStartupScript, which will delay execution of showjQueryDialog()until the page has finished loading and the jQuery code has had a chance to make the DIV into a dialog.
按钮点击问题是相关的：RegisterClientScriptBlock会输出一个脚本，一遇到就运行，所以把它变成对话框的jQuery代码还没有机会运行。为了让它有机会这样做，您可以将 C# 代码更改为 use RegisterStartupScript，这将延迟执行，showjQueryDialog()直到页面完成加载并且 jQuery 代码有机会使 DIV 成为对话框。
if (timeSpan.Days >= 30)
{
//Show JQuery Dialog Here
ScriptManager.RegisterStartupScript(this, typeof(Page),
"showExpiration", "showjQueryDialog()", true);
}
回答by John Boker
make sure you are specifying the correct doctype at the top of your page, this seems to be the cause of some issues that i've seen.
确保您在页面顶部指定了正确的文档类型，这似乎是我看到的一些问题的原因。
edit:
编辑：
also, to keep it from flashing at the beginning you can have something like
另外，为了防止它在开始时闪烁，您可以使用类似的东西
#debug { display: none; }
somewhere before the element (most likely your stylesheet or in the head).
元素之前的某处（很可能是您的样式表或头部）。
another thing that might help is if you put set:
另一件可能有帮助的事情是，如果你设置：
OnClientClick="showjQueryDialog(); return false;";
in the page load or similar, that way you wont need a postback (asynchronous or otherwise).
在页面加载或类似情况下，这样您就不需要回发（异步或其他方式）。
回答by bendewey
The reason its not showing is because the document probably hasn't loaded yet. and document.ready hasn't been called, so dialog("open") is getting called before dialog({options}); so to fix this just add the code to in a doc.ready call.
它没有显示的原因是因为文档可能还没有加载。并且 document.ready 还没有被调用，所以 dialog("open") 在 dialog({options}); 之前被调用；所以要解决这个问题，只需在 doc.ready 调用中添加代码即可。
Also, your only loading the dialog once, so you don't really need to initialize it as autoOpen:false, use the display:none then show it as John Boker said
此外，您只加载一次对话框，因此您实际上不需要将其初始化为 autoOpen:false，使用 display:none 然后像 John Boker 所说的那样显示它
function showjQueryDialog() {
$(document).ready(function() {
$("#dialog").dialog({
modal: true,
buttons: { "Renew Membership": function() { $(this).dialog("close"); } });
$("#dialog").show(); // sets display:block;
//alert("Time to renew Membership!");
});
}
<div id="dialog" style="display:none">
<!--..-->
</div>
回答by Joe Johnston
I know this is old now. However, Set your class to the jQuery UI built in ui-helper-hidden.
我知道这已经很老了。但是，将您的类设置为 ui-helper-hidden 中内置的 jQuery UI。
<div id="dialog" title="Membership Renewal" class="ui-helper-hidden">
Your membership is going to expire.
</div>
This will resolve your div's unwanted cameo behaviour.
这将解决您的 div 不需要的客串行为。
