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-index为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

我需要的是@Before应用于z-index:1。没有ui-dialog我可以申请z-index来完成这项工作。

我在Wordpress中这样做，包括'jquery'，'jquery-ui-core'，'jquery-ui-dialog'脚本。这是我的相关CSS：

ui-widget-overlay

Answer 5

您可以创建一个jsFiddle来在您的环境之外重新创建此问题吗？如果没有，这里有一些想法：

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

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

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

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

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

5 个答案: