js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

时间 2020-09-20 标签 js+css css 实现居中弹出浏览器窗口滚动条滚动

本文为你们详细介绍下使用js实现遮罩弹出层居中，且随浏览器窗口滚动条滚动，示例代码以下，感兴趣的朋友能够参考下，javascript

js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) css

下面看看个人原始代码：html

<!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 />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <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="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.htmjava