js遮罩层弹出显示效果组件化
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
