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

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);
}