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

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

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

1. 一、蒙灰层  
2. //显示蒙灰层  
3. function ShowMark(){  
4.      var xp_mark=document.getElementById("xp_mark");  
5.      if(xp_mark!=null) {  
6.          //设置DIV  
7.          xp_mark.style.left=0+"px";  
8.          xp_mark.style.top=0+"px";  
9.          xp_mark.style.position="absolute";  
10.          xp_mark.style.backgroundColor="#000";  
11.          xp_mark.style.zIndex="1";  
12.          if(document.all) {  
13.             xp_mark.style.filter="alpha(opacity=50)";  
14.             var Ie_ver=navigator["appVersion"].substr(22,1);  
15.             if(Ie_ver==6||Ie_ver==5){hideSelectBoxes();}  
16.          }  
17.          else{xp_mark.style.opacity="0.5";}  
18.          xp_mark.style.width="100%";  
19. //       var heights=XP_getPageSize().h;  
20. //       if(heights<600) {  
21. //         heights=620;  
22. //       }  
23. //       xp_mark.style.height=heights+"px";  
24.          xp_mark.style.height=="100%";  
25.          xp_mark.style.display="block";  
26.      }  
27.      else{  
28.      //页面添加div explainDiv,注意必须是紧跟body 内的第一个元素.否则IE6不正常.  
29.      $("body").prepend("<div id='xp_mark' style='display:none;'></div>");  
30.      ShowMark();//继续回调自己  
31.      }   
32.                
33. }  
34.   
35. //隐藏蒙灰层  
36. function HideMark(){  
37.     var xp_mark=document.getElementById("xp_mark");  
38.     xp_mark.style.display="none";      
39.     var Ie_ver=navigator["appVersion"].substr(22,1);  
40.     if(Ie_ver==6||Ie_ver==5){showSelectBoxes();}  
41. }  
42.   
43. //获取页面的高度与宽度  
44. function XP_getPageSize(){  
45.     var pt = {w:0,h:0};   
46.     if (window.innerHeight && window.scrollMaxY){    
47.       pt.w = document.body.scrollWidth;  
48.       pt.h = window.innerHeight + window.scrollMaxY;  
49.     }  
50.     else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac  
51.       pt.w = document.body.scrollWidth;  
52.       pt.h = document.body.scrollHeight;  
53.     }   
54.     else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari  
55.       pt.w = document.body.offsetWidth;  
56.       pt.h = document.body.offsetHeight;  
57.     }  
58.     return pt;  
59. }  
60.   
61. //显示所有的下拉列表框  
62. function showSelectBoxes(){  
63.  selects = document.getElementsByTagName("select");  
64.  for (i = 0; i != selects.length; i++) {selects[i].style.visibility = "visible"; }  
65. }  
66.   
67. //隐藏所有的下拉列表框  
68. function hideSelectBoxes(){  
69.  selects = document.getElementsByTagName("select");  
70.  for (i = 0; i != selects.length; i++) {selects[i].style.visibility = "hidden";}  
71. }  
72.   
73. 二、弹出显示层div  
74. //让层居中显示-老版本  
75.   
76. function setDivToCenter(obj) {  
77.  obj.style.position = "absolute";  
78.  obj.style.zIndex = "222";  
79.  obj.style.display = "block";  
80.    
81.  var d = document.documentElement, b = document.body, w = window;  
82.  var viewPort ={ left:0, top: 0, width:0, height:0};  
83.  viewPort.top = b.scrollTop || d.scrollTop ;   
84.  viewPort.left = b.scrollLeft || d.scrollLeft ;   
85.  viewPort.height = w.innerHeight || d.clientHeight || b.clientHeight;   
86.  viewPort.width = w.innerWidth || d.clientWidth || b.clientWidth;   
87.   
88.  obj.style.top = (viewPort.top + viewPort.height/2 - obj.offsetHeight/2) + "px";  
89.  obj.style.left = (viewPort.left + viewPort.width/2 - obj.offsetWidth/2) + "px";  
90. }  
91.   
92.   
93. //让层居中显示-新版本  
94.   
95. function showDiv(obj){//页面可以用obj == document.getElementById();  
96.  obj = $("#tanchu");//遮罩层div  

[html] view plain copy

1.  $(obj).show().css({"zIndex":"222","position":"absolute"});  
2.  center(obj);  
3.  $(window).scroll(function(){  
4.   center(obj);  
5.  });  
6.  $(window).resize(function(){  
7.   center(obj);  
8.  });   
9. }  
10.   
11. function center(obj){//页面可以用obj == document.getElementById();  
12.    var windowWidth = document.documentElement.clientWidth;     
13.    var windowHeight = document.documentElement.clientHeight;     
14.      
15.    var popupHeight =$(obj).height();     
16.    var popupWidth =$(obj).width();      
17.      
18.    $(obj).css({  
19.     "top": (windowHeight-popupHeight-200)/2+$(document).scrollTop()+130,     
20.     "left": (windowWidth-popupWidth)/2     
21.    });    
22. }  
23.   
24.    
25.   
26.  //让层居中隐藏  
27. function closeDiv(obj){  
28.     $(obj).hide();  
29.     $(window).unbind();  
30. }  

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