弹窗居中遮罩

借鉴：http://blog.wpjam.com/m/jquery-popup-mask-effect/

点击弹窗居中：

html:  注意：下面的弹窗div和背景div好像不能是同级，最好弹窗div属于更外层级

<div class="bg"></div>

<div class="pup">de</div>

css:

.pup{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
z-index:99999;
display: none;
background: white;
}
.bg{
position: fixed;
z-index: 3;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background:#000;
opacity:0.7;
}

JS:

平缓显示

var wHeight=$(window).height();
var wWidth=$(window).width();

$('.pup').fadeIn(2000).css({
"width":wWidth/2,
"height":wHeight/2

})
$('.bg').fadeIn(2000);
$('.bg').click(function(){
$('.bg').fadeOut(800);
$('.pup').fadeOut(800);

})