js遮罩层弹出显示效果组件化

浏览数：27 / 时间：2015年06月09日

1.在web开发中经常遇到遮罩层的效果，可以将这种常用方法通用化

 1     function showid(idname){
 2         var isIE = (document.all) ? true : false;
 3         var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
 4         var newbox = document.getElementById(idname);
 5         newbox.style.zIndex = "9999999";
 6         newbox.style.display = "block"
 7         newbox.style.position = !isIE6 ? "fixed" : "absolute";
 8         newbox.style.top = newbox.style.left = "50%";
 9         newbox.style.marginTop = -newbox.offsetHeight / 2 + "px";
10         newbox.style.marginLeft = -newbox.offsetWidth / 2 + "px";
11         var layer = document.createElement("div");
12         layer.id = "layer";
13         layer.style.width = layer.style.height = "100%";
14         layer.style.position = !isIE6 ? "fixed" : "absolute";
15         layer.style.top = layer.style.left = 0;
16         layer.style.backgroundColor = "#888";
17         layer.style.zIndex = "9999998";
18         layer.style.opacity = "0.6";
19         document.body.appendChild(layer);
20     
21         function layer_iestyle(){
22             layer.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) +
23             "px";
24             layer.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +
25             "px";
26         }
27         function newbox_iestyle(){
28             newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";
29             newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";
30         }
31         if (isIE) {
32             layer.style.filter = "alpha(opacity=60)";
33         }
34         if (isIE6) {
35             layer_iestyle()
36             newbox_iestyle();
37             window.attachEvent("onscroll", function(){
38                 newbox_iestyle();
39             })
40             window.attachEvent("onresize", layer_iestyle)
41         }
42                     
43     }
44     
45