如果对话框的父级具有固定位置,则jQuery模式对话框将由overlay div隐藏
Lar*_*erg 2 html jquery overlay dialog positioning
我的一个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;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>
加载页面后,它显示如下:
正常div中的对话框正确显示
第一个对话框定义为非固定定位div,对话框正常显示:
固定定位div内的对话框被覆盖
请注意,当显示在固定定位div中定义的第二个对话框时,用户无法单击它,因为它被覆盖div覆盖:
请注意,覆盖div的z-index在两种情况下均为1001,对话框的z-index为1002.因此覆盖div不应覆盖对话框,但不幸的是,固定位置div内的对话框就是这种情况.
由于我使用的是Primefaces,因此我将使用jQuery 1.4.4.问题出现在Firefox 4,最新版本和Safari,最新版本中.
你能重建这个问题吗？你有解决方案吗？请注意,虽然可以解决问题,但我不想将对话框放在固定定位的div之外.原因是我正在使用JSF的模板机制,因此我的页面的页脚将动态填充内容 - 在这种情况下是一个弹出对话框.如果我必须将对话放在其他地方,它将破坏模块化.
小智 5
我在这里得到了同样的东西,我只是将位置设置为固定在叠加层上并且它有效.
.ui-widget-overlay{
position:fixed;
}