js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 兼容IE/FF/Chrome

<!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%;}
        .wrap{height:980px; padding-top:20px;text-align:center;}
        p{font-size:14px;text-align:center;line-height:24px;}
        /** 遮罩层 **/
        #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);
        }
        /** 弹出层 **/
        #popup{
            display:none;
            width:300px;
            z-index:1000;
            left:50%;
            top:50%;
            position:fixed!important;
            margin-left:-150px !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;}
        #clickbtn{margin-top:20px;}
    </style>
</head>
<body>
    <div class="wrap">
        <p>
            我是正文我是正文我是正文我是正文我是正文我是正文我是正文
            <br />
            我是正文我是正文我是正文我是正文我是正文我是正文我是正文
            <br />
            我是正文我是正文我是正文我是正文我是正文我是正文我是正文
            <br />
            我是正文我是正文我是正文我是正文我是正文我是正文我是正文
            <br />
            我是正文我是正文我是正文我是正文我是正文我是正文我是正文
        </p>
        <input type="button" id="clickbtn" value="clike me" />
    </div>
    <div id="masklayer"></div>
    <div id="popup">
        <div class="content">
            <h3>我是弹出层 有没有居中？</h3>
            <p>居中居中居中居中居中居中</p>
            <p>居中居中居中居中居中</p>
            <p>居中居中居中居中</p>
            <p>居中居中居中</p>
        </div>
    </div>
    <script type="text/javascript">
        (function(masklayer){
            var clickbtn =  document.getElementById('clickbtn');
            clickbtn.onclick = function(){
                var popup =  document.getElementById('popup');
                masklayer.style.display='block';
                popup.style.display ='block';
                var h = popup.clientHeight;
                with(popup.style){
                    marginTop = -h/2+'px';
                }
            }
        })(document.getElementById('masklayer'))
    </script>
</body>

</html>
View Code