js-div遮罩层、div弹出层居中（遮罩层居中显示）

js-div遮罩层、div弹出层居中

转载自：http://www.blogjava.net/jimingminlovefly/articles/366989.html

思路：打开时，显示遮罩层ShowMark()和div弹出层showDiv(divObj)；关闭时，隐藏遮罩层HideMark()和div弹出层closeDiv(divObj)。

一、蒙灰层
//显示蒙灰层
function ShowMark(){
     var xp_mark=document.getElementById("xp_mark");
     if(xp_mark!=null) {
         //设置DIV
         xp_mark.style.left=0+"px";
         xp_mark.style.top=0+"px";
         xp_mark.style.position="absolute";
         xp_mark.style.backgroundColor="#000";
         xp_mark.style.zIndex="1";
         if(document.all) {
            xp_mark.style.filter="alpha(opacity=50)";
            var Ie_ver=navigator["appVersion"].substr(22,1);
            if(Ie_ver==6||Ie_ver==5){hideSelectBoxes();}
         }
         else{xp_mark.style.opacity="0.5";}
         xp_mark.style.width="100%";
//       var heights=XP_getPageSize().h;
//       if(heights<600) {
//         heights=620;
//       }
//       xp_mark.style.height=heights+"px";
         xp_mark.style.height=="100%";
         xp_mark.style.display="block";
     }
     else{
     //页面添加div explainDiv,注意必须是紧跟body 内的第一个元素.否则IE6不正常.
     $("body").prepend("<div id='xp_mark' style='display:none;'></div>");
     ShowMark();//继续回调自己
     } 
             
}

//隐藏蒙灰层
function HideMark(){
    var xp_mark=document.getElementById("xp_mark");
    xp_mark.style.display="none";    
    var Ie_ver=navigator["appVersion"].substr(22,1);
    if(Ie_ver==6||Ie_ver==5){showSelectBoxes();}
}

//获取页面的高度与宽度
function XP_getPageSize(){
    var pt = {w:0,h:0}; 
    if (window.innerHeight && window.scrollMaxY){  
      pt.w = document.body.scrollWidth;
      pt.h = window.innerHeight + window.scrollMaxY;
    }
    else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
      pt.w = document.body.scrollWidth;
      pt.h = document.body.scrollHeight;
    } 
    else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
      pt.w = document.body.offsetWidth;
      pt.h = document.body.offsetHeight;
    }
    return pt;
}

//显示所有的下拉列表框
function showSelectBoxes(){
 selects = document.getElementsByTagName("select");
 for (i = 0; i != selects.length; i++) {selects[i].style.visibility = "visible"; }
}

//隐藏所有的下拉列表框
function hideSelectBoxes(){
 selects = document.getElementsByTagName("select");
 for (i = 0; i != selects.length; i++) {selects[i].style.visibility = "hidden";}
}

二、弹出显示层div
//让层居中显示-老版本

function setDivToCenter(obj) {
 obj.style.position = "absolute";
 obj.style.zIndex = "222";
 obj.style.display = "block";
 
 var d = document.documentElement, b = document.body, w = window;
 var viewPort ={ left:0, top: 0, width:0, height:0};
 viewPort.top = b.scrollTop || d.scrollTop ; 
 viewPort.left = b.scrollLeft || d.scrollLeft ; 
 viewPort.height = w.innerHeight || d.clientHeight || b.clientHeight; 
 viewPort.width = w.innerWidth || d.clientWidth || b.clientWidth; 

 obj.style.top = (viewPort.top + viewPort.height/2 - obj.offsetHeight/2) + "px";
 obj.style.left = (viewPort.left + viewPort.width/2 - obj.offsetWidth/2) + "px";
}


//让层居中显示-新版本

function showDiv(obj){//页面可以用obj == document.getElementById();
 obj = $("#tanchu");//遮罩层div

 $(obj).show().css({"zIndex":"222","position":"absolute"});
 center(obj);
 $(window).scroll(function(){
  center(obj);
 });
 $(window).resize(function(){
  center(obj);
 }); 
}

function center(obj){//页面可以用obj == document.getElementById();
   var windowWidth = document.documentElement.clientWidth;   
   var windowHeight = document.documentElement.clientHeight;   
   
   var popupHeight =$(obj).height();   
   var popupWidth =$(obj).width();    
   
   $(obj).css({
    "top": (windowHeight-popupHeight-200)/2+$(document).scrollTop()+130,   
    "left": (windowWidth-popupWidth)/2   
   });  
}

 

 //让层居中隐藏
function closeDiv(obj){
    $(obj).hide();
    $(window).unbind();
}

方法showDiv（obj）和center（obj）可以保证div遮罩层居中显示