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

Question

我正在开发一些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"));
        }                              
    });
});

Answer 1

我修复了。没有多少人在抱怨这个问题。只有我这样吗?总之，这是我如何解决它。如果你知道怎么做，这很简单。

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

Answer 2

我尝试了公认的答案，它似乎在某些情况下工作，但不是其他情况。使用同样的想法，这是我想出的代码…

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

…这是基于.ui-widget-overlay的z指数为9998。

此外，为了解决覆盖层不覆盖页面的全部高度的问题(因为.ui-widget-overlay只有1000%的高度)，我想出了这个:

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

Answer 3

你需要停止像这样使用appendTo，而使用新的对话框选项"appendTo"

:

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

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

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

Answer 5

您可以创建一个jsFiddle来在您的环境之外重新创建这个问题吗?如果没有，下面是我的一些想法:

把你的javascript放到一个document ready block中，像这样:

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

将btnOpendialog更改为非asp。. NET服务器控件。因为它所做的只是打开jquery对话框，所以它不需要是一个服务器控件。改成这样:

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