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：按钮位于控件内，控件位于母版页上。我注意到的第一件事是，当页面加载时，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，因此在对话框（{options}）之前调用dialog（“open”）;所以要解决这个问题，只需将代码添加到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>

DIV内容显示在页面而不是JQuery Dialog

4 个答案: