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

复制代码代码如下:

<!doctype html>

<head>

*{}{margin:0;padding:0;}

html{}{_background:url(about:blank);} /**//* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */

body{}{background:#fff; font: 12px/1.5 Tahoma,Geneva, 5b8b4f53, 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>

<p>

我是正文我是正文我是正文我是正文我是正文我是正文我是正文

<br />

我是正文我是正文我是正文我是正文我是正文我是正文我是正文

<br />

我是正文我是正文我是正文我是正文我是正文我是正文我是正文

<br />

我是正文我是正文我是正文我是正文我是正文我是正文我是正文

<br />

我是正文我是正文我是正文我是正文我是正文我是正文我是正文

</p>

</div>

<div>

<h3>我是弹出层有没有居中？</h3>

<p>居中居中居中居中居中居中</p>

<p>居中居中居中居中居中</p>

<p>居中居中居中居中</p>

<p>居中居中居中</p>

</div>

(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>