本文为大家详细介绍下使用js实现遮罩弹出层居中，且随浏览器窗口滚动条滚动，示例代码如下，感兴趣的朋友可以参考下，
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
下面看看我的原始代码：
<!doctype html><head><meta charset="utf-8" /><title></title><style type="text/css">* {margin:0;padding:0;}html {_background:url(about:blank);} /** 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */body {background:#fff;font: 12px/1.5 Tahoma, Geneva, \\5b8b\\4f53, sans-serif;height:100%;}.img_zfb{width:100%;height:100%;}.mid {font-size:12px;text-align:center;line-height:24px;}/** 遮罩层 **/ #div_masklayer {background:#000;display:none;filter:alpha(opacity = 50);opacity:0.5;top:0;left:0;height:100%;width:100%;z-index:999;position:fixed;_position:absolute;_left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);_top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);}/** 弹出层 **/ #div_popup {display:none;width:240px;z-index:1000;left:50%;top:50%;position:fixed!important;/*margin-left:-120px !important;*/_position:absolute;_top:expression(eval(patMode && patMode=='CSS1Compat')? documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /** IE6 */ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /* IE5 IE5.5*/}.content {background:#f3f3f3;border:1px solid #999;}.content h3 {background:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px;padding-left:5px;}</style></head><body><div class="wrap"><p> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />我是正文我是正文我是正文我是正文我是正文我是正文我是正文 </p><br /><br /><br /><br /><br /><br /><br /> <input type="button" id="btn_test" value="clike me" /><br /><br /><br /><br /><br /><div style="width:60px; height:900px; display:block; position:absolute; left:40px; background:red;"> </div></div><div id="div_masklayer"></div><div id="div_popup"><div class="content"><h3>我是弹出层 有没有居中？</h3><img class="img_zfb" id="img_zfb" src="/cnblogs_com/mq0036/508398/o_12.png"><p class="mid">居中居中居中居中居中居中</p><p class="mid">居中居中居中居中居中居中</p><p>居中居中居中</p></div></div><script type="text/javascript"> (function (){var btnclick = document.getElementById('btn_test');var divmasklayer = document.getElementById('div_masklayer');var divpoppu = document.getElementById('div_popup');btnclick.onclick = function (){var popup = document.getElementById('div_popup');var divmasklayer = document.getElementById('div_masklayer');divmasklayer.style.display = 'block';popup.style.display = 'block';//var h = popup.clientHeight;var h = popup.Height;with(popup.style){popup.style.marginLeft = -popup.clientWidth / 2 + 'px';popup.style.marginTop = -popup.clientHeight / 2 + 'px';}}divmasklayer.onclick=function(){ document.getElementById('div_popup').style.display="none"; document.getElementById('div_masklayer').style.display="none";}})();</script></body></html>
参考出处：/article/44354.htm
