在ASP.net中隐藏在叠加层后面的模态jQuery对话框

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

......这是基于这样的事实的z-index的.ui-widget-overlay是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