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

Posted jack_孟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)相关的知识，希望对你有一定的参考价值。

本文为大家详细介绍下使用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 />
    &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.htm

以上是关于js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)的主要内容，如果未能解决你的问题，请参考以下文章

用div做的弹出层，如何用css设置它不随着滚动条移动呢？ 在线急等！！！！ 哪位大哥帮帮忙！！！

JS弹出层遮罩,隐藏背景页面滚动条细节优化

JS中如何让弹出页面居中且随页面的滚动而滚动？效果请参阅豆瓣。

js弹出div并显示遮罩层

移动端在有弹出层时如何禁止底层的滚动

弹出遮罩层水平垂直居中