Question

我的一个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>

加载页面后，显示如下：

Page after it is loaded

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

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

First dialog appears correctly

固定定位div中的对话框已叠加

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

Second dialog does not appear correctly

请注意，叠加div的z-index在两种情况下均为1001，对话框的z-index为1002.因此叠加div不应覆盖对话框，但不幸的是，固定位置内的对话框就是这种情况格。

由于我使用的是Primefaces，因此我将使用jQuery 1.4.4。问题出现在Firefox 4，最新版本和Safari，最新版本中。

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

Answer 1

我在这里得到了同样的东西，我只是将位置设置为固定在叠加层上并且它有效。

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

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

将此代码段包含在标题中不会找到div.ui-dialog标记，因为这些div会动态注入ui-dialog类。所以这个bug修复必须在之后执行。

如果对话框的父级具有固定位置，则jQuery模式对话框将由overlay div隐藏

2 个答案: