使用此演示执行 JQuery 覆盖调用：http: //jquerytools.org/demos/overlay/custom-effect.html
覆盖显示给我，但覆盖中的掩码影响整个页面并且不暴露主 div 元素。IE弹出框变暗并且不透明。
我正在使用以下内容提取 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',
})
});
问题的示例图像：
