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

Posted 2023-04-13

【中文标题】DIV 内容显示在页面而不是 JQuery 对话框上

【英文标题】：DIV content shows on page instead of JQuery Dialog

【发布时间】：2010-10-14 15:33:17

【问题描述】：

我有以下 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 的内容。

【问题讨论】：

你能为我们展示一下 ScripManager.RegisterClientScriptBlock 的输出吗？我有一种预感，它只是直接在页面上输出 javascript 并在 $(document).ready 之前触发。

【参考方案1】：

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

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

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

【讨论】：

那么class="ui-helper-hidden" 提供帮助的机制是什么？我需要某种相应的 CSS，还是由 JS 处理？

当您使用 jQuery css 文件时，jQuery 会处理它。所有的 jquery themeroller css 文件都有这个类。例如code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css 更多jqueryui.com/themeroller

【参考方案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);

【讨论】：

我将 div 显示更改为 none 并隐藏了 div，我将代码更改为使用 RegisterStartupScript，但对话框现在没有显示。

如果您更改脚本，但忽略 display:none 会发生什么？

我从来没有运气把 style="display:none;"在实际元素上，如果以这种方式指定，jquery 似乎总是无法修改它的显示。

@John - 我不确定这是否只是我的问题，还是普遍存在的。在这种情况下，使用样式声明绝对是要走的路。

我删除了 style="display:none"，但保留了 RegisterStartupScript，它直接在页面上显示 div 的内容，而不是对话框。

【参考方案3】：

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

编辑：

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

#debug  display: none; 

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

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

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

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

【讨论】：

控件中没有doctype，但是母版页中的那个是：ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

您可以尝试 ttp://www.w3.org/TR/html4/strict.dtd" rel="nofollow" target="_blank">w3.org/TR/html4/strict.dtd"> 作为您的文档类型吗？

如果可能的话，我会支持使用 OnClientClick 的想法。

OnClientClick 的问题是我只想在用户的过期日期为

如果满足该条件，您可以在代码隐藏中添加 OnClientClick。

【参考方案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>

【讨论】：

谢谢，display:none 问题让我很受用（我再想想），这很有帮助。