本文为大家详细介绍下使用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(document.compatMode && document.compatMode=='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="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="http://images.cnblogs.com/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>
参考出处：http://www.jb51.net/article/44354.htm