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

来源：互联网发布：js清除所有cookie 编辑：程序博客网时间：2024/05/22 10:51

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遮罩层居中显示

0 1