Question

我有一个jQuery Dialog定义如下：

$(function ()
    {
        $("#addDocumentModal").dialog({
            modal: true,
            autoOpen: false,
            height: 300,
            width: 475
        });

        //allow asp.net button clicks
        $("#addDocumentModal").parent().appendTo(jQuery("form:first"));
    });

最后一行旨在允许ASP.NET按钮点击仍然处理，但是我遇到的问题是当我在UI风格的背景图像中有那条线时（试过几个不同的 - 所有来自http://www.asp.net/ajaxlibrary/cdn.ashx）覆盖了对话框，因此您无法做任何事情。取消该行可以使对话框按预期显示，但按钮不起作用。

一个注意事项，我也尝试使用$（document）.ready（）（而不只是$（function（））并且没有改变任何内容。

有什么建议吗？我正在使用jQuery 1.9.1和jQuery UI 1.10.1。

Answer 1

我有同样的问题。当你将它作为模态时，Jquery（jquery.UI）会自动转储几个inlune样式。这是解决方案：

下载jquery.ui样式表并在解决方案中包含样式以对其进行自定义并参考下载的内容:(链接如下）

http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css

在此样式表中 - 找到“ui-front”类。

将z-index更改/添加到500或继续更改，直到您获得所需内容。

干杯!!

Answer 2

不要试图推动div的父级，将对话框推送到以下形式：

$(document).ready(function() {
    $("#addDocumentModal").dialog({
        modal: true,
        autoOpen: false,
        height: 300,
        width: 475
    }).parent().appendTo(jQuery("form:first")); //allow asp.net button clicks
});

如果这不起作用，请查看z-index上模态div设置的CSS。确保它低于对话框。

jQuery Modal覆盖整页

2 个答案: