彈出層帶遮罩顯示在屏幕正中間

最近項目中用到了遮罩層，在這里總結下以備下次使用。

首先，遮罩應全屏，同時需要兼容多種瀏覽器，需要設置div的樣式為：　

  position:absolute;
  top:0%; /**遮罩全屏top,left都為0,width,height為100%**/
  left:0%; 
  width:100%; 
  height:100%; 
  filter:alpha(opacity=50);
  opacity: 0.5; 
  -moz-opacity:0.5; 
  -khtml-opacity: 0.5;  
  background-color:black;
  z-index: 1001;  
  display:none;

然后，設置彈出層顯示在屏幕正中間：

  //讓指定的DIV始終顯示在屏幕正中間
  function funShowDivCenter(div) {
     var top = ($(window).height() - $(div).height()) / 2;
     var left = ($(window).width() - $(div).width()) / 2;
     var scrollTop = $(document).scrollTop();
     var scrollLeft = $(document).scrollLeft();
     $(div).css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
  }

最后，應注意在彈出層中不能設置元素的padding值，否則將不會顯示在屏幕正中間。

效果圖：

 

Demo下載