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%;}
.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>
复制代码 代码如下:
<!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>