快捷導(dǎo)航

js+css 實(shí)現(xiàn)遮罩居中彈出層(隨瀏覽器窗口滾動(dòng)條滾動(dòng))

更新時(shí)間：2013年12月11日 17:06:44 作者：

本文為大家詳細(xì)介紹下使用js實(shí)現(xiàn)遮罩彈出層居中，且隨瀏覽器窗口滾動(dòng)條滾動(dòng)，示例代碼如下，感興趣的朋友可以參考下

 
<!doctype html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<style type="text/css"> 
*{}{margin:0;padding:0;} 
html{}{_background:url(about:blank);} /**//* 阻止閃動(dòng) in IE6 , 把空文件換成about:blank , 減少請(qǐng)求 */ 
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>我是彈出層 有沒(méi)有居中？</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> 