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

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:按钮，它在控件中，控件在母版页面上。我注意到的第一件事是，当加载页面时，将显示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的内容就变得可见了。

4 个解决方案

#1

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。

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

The button click problem is related: RegisterClientScriptBlock will 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#代码来使用RegisterStartupScript，这将延迟showjQueryDialog()的执行，直到页面完成加载，jQuery代码有机会将DIV设置为一个对话框。

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

#2

I know this is old now. However, Set your class to the jQuery UI built in ui-helper-hidden.

我知道现在已经老了。但是，将类设置为UI，该UI构建在UI -helper-hidden中。

<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不需要的cameo行为。

#3

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.

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

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:

另一件可能有用的事情是，如果你设置set:

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

in the page load or similar, that way you wont need a postback (asynchronous or otherwise).

在页面加载或类似的情况下，您不需要回发(异步或其他)。

#4

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.

它没有显示的原因是文档可能还没有加载。和文档。还没有调用ready，所以在调用dialog("open")之前调用dialog({options});为了解决这个问题，只需将代码添加到doc中。准备好了电话。

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>

#1