隐藏在 ASP.net 中覆盖层后面的模态 jQuery 对话框答案

【问题标题】：Modal jQuery dialog hidden behind overlay in ASP.net隐藏在 ASP.net 中覆盖层后面的模态 jQuery 对话框
【发布时间】：2013-04-23 13:06:33
【问题描述】：

我正在开发一些 Jquery 对话框，发现当我设置 Modal: true 时对话框被隐藏了。设置 Modal: false 时，我发现一切都按预期工作。希望有人可以帮助我。

<asp:Button ID="btnOpendialog" runat="server" Text="Button" ClientIDMode="Static" />

<div id="dialog">

<h1>Test</h1>
    <asp:Button ID="btnClickfromDialog" runat="server" Text="Button" />

</div>

$(function () {
    $("#btnOpendialog").click(function (e) {
        $("#dialog").dialog("open");
        return false;
    });

    $("#dialog").dialog({
        height: 200,
        modal: true,
        autoOpen: false,
        open: function () {
            $(this).parent().appendTo($("form:first"));
        }                              
    });
});

【问题讨论】：

标签： jquery asp.net jquery-ui modal-dialog jquery-ui-dialog

【解决方案1】：

我修好了。抱怨这个问题的人并不多。只有我吗？无论如何，这就是我修复它的方法。当您知道如何操作时非常简单。

.ui-widget-overlay
{
        z-index: 0;   
}

【讨论】：

不错的一个！为我工作，尽管我必须使用 !Important 以确保它优先。
对于其他访问此页面的人，正如@Eddie R 提到的，您应该使用新的 API $( ".selector" ).dialog({ appendTo: "#someElem" });

【解决方案2】：

我尝试了接受的答案，它似乎在某些情况下有效，但在其他情况下无效。使用相同的想法，这是我想出的代码...

.ui-dialog { z-index: 9999 !important; }

...这是基于.ui-widget-overlay的z-index是9998这一事实。

另外，为了解决覆盖没有覆盖整个页面高度的问题（因为.ui-widget-overlay只有1000%的高度），我想出了这个：

.ui-widget-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }

【讨论】：

这两种覆盖都适用于跨浏览器的我 - 感谢 ban-geoengineering。

【解决方案3】：

你需要停止像这样使用 appendTo 并使用新的对话框选项“appendTo”

像这样：

$( ".selector" ).dialog({ appendTo: "#someElem" });

取自 jquery-ui 文档 http://api.jqueryui.com/dialog/#option-appendTo

【讨论】：

【解决方案4】：

我只需要将z-index:1 应用于ui-dialog。没有z-index 我可以申请ui-widget-overlay 来完成这项工作。

我在 Wordpress 中执行此操作，包括“jquery”、“jquery-ui-core”、“jquery-ui-dialog”脚本。这是我的相关css：

.ui-widget-overlay {    
    position: absolute; 
    top: 0; 
    left: 0; 
    width:100%;
    height:100%;
    background: #aaaaaa;
    opacity: 0.3;  
}    

.ui-dialog {    
    background-color: #FFFFFF;    
    overflow: hidden;   
    z-index:1;
}

【讨论】：

【解决方案5】：

您能否创建一个 jsFiddle 以在您的环境之外重新创建此问题？如果没有，以下是我的一些想法：

将您的 javascript 放入文档就绪块中，如下所示：

$(document).ready(function() {
// Your javascript here...
});

将 btnOpendialog 更改为非 ASP.NET 服务器控件。由于它所做的只是打开 jquery 对话框，因此它不需要成为服务器控件。改成这样：

<input type="button" id="btnOpendialog" value="Button" />

【讨论】：

$(function () { 与 $(document).ready Clear 相同。无论如何我需要 asp.net 按钮，更改按钮都不会产生影响。感谢您的帮助。我已经修好了。