如果对话框的父级具有固定位置，jQuery 模式对话框将被覆盖 div 隐藏

发布于 2024-11-01 10:39:34 字数 2702 浏览 1 评论 0原文

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

为了演示该问题，我减少了以下 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 索引在两种情况下均为 1001，而对话框的 z 索引为 1002。因此覆盖层 div 不应覆盖对话框，但不幸的是，对话框就是这种情况在固定位置 div 内。

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

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

原文

One of my jQuery dialogs is defined within a div that has a fixed position (footer of page). When a modal jQuery dialog is opened jQuery creates an overlay div that hides the whole page and then puts the dialog to be opened on top having a higher z-index than the overlay div. Unfortunately any dialog that is rendered within a div with fixed position is overlayed by the overlay div although the modal dialog to be opened got a greater z-index then the overlay itself.

The following HTML code that I reduced for demonstration purposes to the problem shows the difference between a dialog within a non fixed position div and within a fixed position 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;v=2.2.1" />
    <link type="text/css" rel="stylesheet" href="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.css?ln=primefaces&v=2.2.1" />
    <title>CSS TEST</title><script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&v=2.2.1"></script><script type="text/javascript" src="/demo-webapp/faces/javax.faces.resource/jquery/ui/jquery-ui.js?ln=primefaces&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>

After loading the page it appears like that:

Page after it is loaded

Dialog within a normal div is shown correctly

The first dialog is defined with a non fixed positioned div and the dialog appears normally:

First dialog appears correctly

Dialog within a fixed positioned div is overlayed

Note, that when the second dialog defined within a fixed positioned div is shown, it cannot be clicked by the user since it is overlayed by the overlay div:

Second dialog does not appear correctly

Please not that z-index of the overlay div is in both cases 1001 and the z-index of the dialog is 1002. So the overlay div should not overlay the dialog, but unfortunately it's the case for dialogs within a fixed position div.

Since I am using Primefaces I am bound to jQuery 1.4.4. The problem occures in Firefox 4, latest Release and Safari, latest Release.

Can you reconstruct this issue and do you have a solution for that? Please note that I don't want to to place the dialog outside of the fixed positioned div although it would solve the issue. The reason for that is that I am using the templating mechanism of JSF and therefore the footer of my page will be filled dynamically with content -- in this case a popup dialog. It would break modularity if I have to place the dialog somewhere else.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不醒的梦 2024-11-08 10:39:34

我在这里得到了同样的结果，我只需将位置设置为固定在覆盖层上，它就起作用了。

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

I got the same thing here and I simply set the position to fixed on the overlay and it worked.

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

回复收藏 0 原文

临风闻羌笛 2024-11-08 10:39:34

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

<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 类是动态注入的。所以这个错误修复必须在之后执行。

I came up with this solution that when included at the bottom of the page, template, etc. moves every dialog into the body tag.

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

Including this snippet into the header doesn't find div.ui-dialog tags since these divs gt their ui-dialog class dynamically injected. So this bug-fix has to be executed after.

回复收藏 0 原文

~没有更多了~