弹出层带遮罩显示在屏幕正中间

最近项目中用到了遮罩层，在这里总结下以备下次使用。

首先，遮罩应全屏，同时需要兼容多种浏览器，需要设置div的样式为：　

复制代码
1 position:absolute;
2 top:0%; /**遮罩全屏top,left都为0,width,height为100%**/
3 left:0%;
4 width:100%;
5 height:100%;
6 filter:alpha(opacity=50);
7 opacity: 0.5;
8 -moz-opacity:0.5;
9 -khtml-opacity: 0.5;
10 background-color:black;
11 z-index: 1001;
12 display:none;
复制代码
然后，设置弹出层显示在屏幕正中间：

复制代码
1 //让指定的DIV始终显示在屏幕正中间
2 function funShowDivCenter(div) {
3 var top = ($(window).height() - $(div).height()) / 2;
4 var left = ($(window).width() - $(div).width()) / 2;
5 var scrollTop = $(document).scrollTop();
6 var scrollLeft = $(document).scrollLeft();
7 $(div).css({ position: ‘absolute‘, ‘top‘: top + scrollTop, left: left + scrollLeft }).show();
8 }
复制代码
最后，应注意在弹出层中不能设置元素的padding值，否则将不会显示在屏幕正中间。