掩码在JQuery叠加功能调光主div元素也

Question

使用此演示进行JQuery重叠调用：http://jquerytools.org/demos/overlay/custom-effect.html

Overlay正在为我显示，但覆盖中的掩码影响整个页面而不暴露主div元素。 I.E.弹出框也变暗，也不透明。

我正在使用以下内容来提取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>

这是我的代码：

HTML：

<div class="contact_overlay" id="overlay_1">
<div class="close">X</div>
</div>

CSS：

.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;
}

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',
    })
});

问题示例图片：

Answer 1

看起来您需要为弹出窗口提供比叠加层更高的z-index值。