Of Stack

Js + CSS implementation mask center popup layer of with the browser window scroll bar scroll

  • 2020-03-30 00:49:18
  • OfStack
Js + CSS implementation mask center popup layer (scroll with browser window)
 
<!doctype html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<style type="text/css"> 
*{}{margin:0;padding:0;} 
html{}{_background:url(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: /**/ 
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /**/ 
} 
.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> 
 I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body  
<br /> 
 I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body  
<br /> 
 I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body  
<br /> 
 I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body  
<br /> 
 I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body I'm the body  
</p> 
<input type="button" id="clickbtn" value="clike me" /> 
</div> 
<div id="masklayer"></div> 
<div id="popup"> 
<div class="content"> 
<h3> I'm the pop-up layer   Is it in the middle? </h3> 
<p> Center center center center center center center </p> 
<p> Center center center center center </p> 
<p> Center center center center </p> 
<p> Center center </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>
Related articles: