如果对话框的父级具有固定位置，则 jQuery 模态对话框被覆盖 div 隐藏答案

【问题标题】：jQuery modal dialog is hidden by overlay div if dialog's parent has fixed position如果对话框的父级具有固定位置，则 jQuery 模态对话框被覆盖 div 隐藏
【发布时间】：2011-08-05 12:13:27
【问题描述】：

我的一个 jQuery 对话框是在一个具有固定位置（页脚）的 div 中定义的。当打开一个模态 jQuery 对话框时，jQuery 创建一个覆盖 div 来隐藏整个页面，然后将要打开的对话框放在顶部，其 z-index 比覆盖 div 高。不幸的是，任何在固定位置的 div 中呈现的对话框都会被覆盖 div 覆盖，尽管要打开的模态对话框的 z-index 比覆盖本身更大。

出于演示目的，我为问题简化的以下 HTML 代码显示了非固定位置 div 内的对话框和固定位置 div 内的对话框之间的区别：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link type="text/css" rel="stylesheet" href="/demo-webapp/faces/javax.faces.resource/themes/sam/theme.css?ln=primefaces&amp;amp;v=2.2.1" />
    <link type="text/css" rel="stylesheet" href="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.css?ln=primefaces&amp;v=2.2.1" />
    <title>CSS TEST</title><script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=2.2.1"></script><script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.js?ln=primefaces&amp;v=2.2.1"></script>

    <script>
    /*<![CDATA[*/
        jQuery(function() {
            jQuery("#dialog1").dialog({
                autoOpen: false,
                modal: true
            });

            jQuery("#dialog2").dialog({
                autoOpen: false,
                modal: true
            });
        });
    /*]]>*/
    </script>
</head>

<body>
    <div style="z-index: 1; position: static;" onclick="jQuery('#dialog1').dialog('open')">
        position: static; /* default */
        <div id="dialog1" title="Dialog1"></div>
    </div>

    <div style="z-index: 1; position: fixed; left: 100px; top: 100px" onclick="jQuery('#dialog2').dialog('open')">
        position: fixed;
        <div id="dialog2" title="Dialog2"></div>
    </div>
</body>

</html>

加载页面后显示如下：

正常 div 中的对话框正确显示

第一个对话框用非固定定位的div定义，对话框正常显示：

固定位置 div 内的对话框被覆盖

请注意，当显示在固定位置 div 中定义的第二个对话框时，用户无法单击它，因为它被覆盖 div 覆盖：

请注意，在这两种情况下，覆盖 div 的 z-index 都是 1001，对话框的 z-index 是 1002。因此，覆盖 div 不应该覆盖对话框，但不幸的是，对于固定位置内的对话框，情况就是如此分区。

因为我使用的是 Primefaces，所以我绑定到 jQuery 1.4.4。该问题出现在 Firefox 4，最新版本和 Safari，最新版本中。

你能重建这个问题吗？你有解决方案吗？请注意，我不想将对话框放置在固定位置的 div 之外，尽管它可以解决问题。原因是我正在使用 JSF 的模板机制，因此我的页面的页脚将动态填充内容——在本例中是一个弹出对话框。如果我必须将对话框放在其他地方，它会破坏模块化。

【问题讨论】：

标签： jquery html dialog overlay positioning

【解决方案1】：

我在这里得到了同样的东西，我只是将位置设置为固定在叠加层上，它就起作用了。

.ui-widget-overlay{
    position:fixed;
}

【讨论】：

不错！感谢您提供的简单解决方案，尽管我无法再测试了。
上帝保佑你。这解决了我在 Android 上覆盖模式的问题。

【解决方案2】：

我想出了这个解决方案，当包含在页面的底部时，模板等将每个对话框移动到正文标记中。

<script>
    /* Bug fix that moves every dialog directly into the body tag since some jQueryUI dialogs are
       sometimes not placed above the overlay div due to their parent divs */
    $(document).ready(function() {
        var body = $("html body")[0];
        $("div.ui-dialog").each(function() {
            $(this).appendTo(body);
        });
    });
</script>

将这个 sn-p 包含在标头中找不到 div.ui-dialog 标签，因为这些 div 将它们的 ui-dialog 类动态注入。所以这个错误修复必须在之后执行。

【讨论】：