首页 > Web开发 > 详细

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

时间:2014-04-04 08:55:56      阅读:463      评论:0      收藏:0      [点我收藏+]

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

bubuko.com,布布扣
 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     
bubuko.com,布布扣

 

js遮罩层弹出显示效果组件化,布布扣,bubuko.com

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

原文:http://www.cnblogs.com/yiliweichinasoft/p/3644249.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!