DIV 内容显示在页面而不是 JQuery 对话框上

Question

我有以下 DIV 标记：

<div id="dialog" title="Membership Renewal">
Your membership is going to expire.
</div>

我有以下 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>

我有一个 asp:Button，它位于控件内，并且该控件位于母版页上。我注意到的第一件事是，当页面加载时，div 会显示，然后在页面加载完成后消失。当我单击按钮时，它会执行以下操作：

if (timeSpan.Days >= 30)
{
//Show JQuery Dialog Here
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "showExpiration",    
"showjQueryDialog()", true);
}

当我单击按钮时，不会弹出对话框，而是显示 div 的内容。

Answer 1

我知道这已经过时了。但是，请将您的类设置为 ui-helper-hidden 中内置的 jQuery UI。

<div id="dialog" title="Membership Renewal" class="ui-helper-hidden"> 
    Your membership is going to expire. 
</div> 

这将解决您的 div 不需要的客串行为。

Answer 2

我相信你在这里有两个相关的问题。

首次加载时显示 DIV 的原因是您尚未告诉它不要这样做。使 DIV 表现为对话框的 jQuery 脚本在加载 HTML DOM 之前不会运行，并且在此之前它不会隐藏 DIV。一个简单的解决方案是默认使用 CSS 隐藏 DIV。

<div id="dialog" title="Membership Renewal" style="display:none;">
Your membership is going to expire.
</div>

按钮点击问题相关：RegisterClientScriptBlock会输出一个脚本，一遇到就运行，所以把它变成对话框的jQuery代码还没来得及运行。为了给它一个这样做的机会，您可以将 C# 代码更改为使用 RegisterStartupScript，这将延迟 showjQueryDialog() 的执行，直到页面完成加载并且 jQuery 代码有机会将 DIV 变为一个对话框。

if (timeSpan.Days >= 30)
{
  //Show JQuery Dialog Here
    ScriptManager.RegisterStartupScript(this, typeof(Page), 
        "showExpiration", "showjQueryDialog()", true);
}

Answer 3

确保您在页面顶部指定了正确的文档类型，这似乎是我看到的一些问题的原因。

编辑：

另外，为了防止它在开始时闪烁，您可以使用类似的东西

#debug { display: none; }

元素之前的某处（很可能是您的样式表或头部）。

另一件可能有帮助的事情是如果你把 set:

OnClientClick="showjQueryDialog(); return false;";

在页面加载或类似情况下，您不需要回发（异步或其他方式）。

Answer 4

它没有显示的原因是因为文档可能还没有加载。并且 document.ready 没有被调用，所以 dialog("open") 在 dialog({options}) 之前被调用；所以要解决这个问题，只需将代码添加到 doc.ready 调用中。

另外，你只加载一次对话框，所以你不需要将它初始化为 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>