JQuery覆盖函数中的掩码也会使主div元素变暗

使用此演示执行JQuery覆盖调用：

覆盖正在为我显示，但是覆盖中的掩码影响了整个页面，而没有暴露主div元素。即弹出框变暗且不透明

我正在使用以下工具提取JQuery库和工具：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/all/jquery.tools.min.js"></script>

JavaScript:

$.easing.drop = function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
};
$.tools.overlay.addEffect("drop", function(css, done) {
var conf = this.getConf(),
overlay = this.getOverlay();
if (conf.fixed)  {
    css.position = 'fixed';
} else {
    css.top += $(window).scrollTop();
    css.left += $(window).scrollLeft();
    css.position = 'absolute';
}
overlay.css(css).show();
overlay.animate(
    { top: '+=55',  opacity: 1,  width: '+=20'}, 400, 'drop', done
);
}, function(done) {
this.getOverlay().animate(
    {top:'-=55', opacity:0, width:'-=20'}, 300, 'drop',
    function() {
        $(this).hide();
        done.call();
    });
});
$(document).ready(function() {
  $("a[rel]").overlay({
    effect: 'drop',
    mask: '#789',
    })
});

问题的示例图像：

---

看起来您需要为弹出窗口指定一个比覆盖窗口更高的z索引值。

主分区（弹出分区）的z索引是否高于覆盖窗口？Contact_覆盖窗口是照片中的“弹出窗口”或绿色框元素，其z索引为1000。所有其他元素中最高的。你能做一把小提琴，或者链接到一个示例站点吗？你的代码帮不上什么忙，我看不出覆盖是如何生成的。在本例中，覆盖的z索引设置为9998，这意味着你的div需要是9999

body

有一个z索引覆盖了我调用的div元素。花了一点时间才发现我的z指数没有被设置。

.contact_overlay {
display:none;
z-index: 1000;
background-color:#d1e8db;
width:700px;
min-height:350px;
border:1px solid #666; 
-moz-box-shadow:    0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
box-shadow:         0 0 90px 5px #000;
margin-left: 100px;
margin-right: 100px;
}
.contact_overlay .close {
position:absolute;
right:3px;
top:3px;
cursor:pointer;
width: 22px;
height: 17px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
border: 0px;
background-color: #959595;
color: #FFFFFF;
font-weight: bold;
font-size: 10px;
text-align: center;
padding-top: 6px;
}

$.easing.drop = function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
};
$.tools.overlay.addEffect("drop", function(css, done) {
var conf = this.getConf(),
overlay = this.getOverlay();
if (conf.fixed)  {
    css.position = 'fixed';
} else {
    css.top += $(window).scrollTop();
    css.left += $(window).scrollLeft();
    css.position = 'absolute';
}
overlay.css(css).show();
overlay.animate(
    { top: '+=55',  opacity: 1,  width: '+=20'}, 400, 'drop', done
);
}, function(done) {
this.getOverlay().animate(
    {top:'-=55', opacity:0, width:'-=20'}, 300, 'drop',
    function() {
        $(this).hide();
        done.call();
    });
});
$(document).ready(function() {
  $("a[rel]").overlay({
    effect: 'drop',
    mask: '#789',
    })
});