JS+CSS Implementation Mask Center pop-up layer (scroll with browser window scroll bar)
<!doctype html>
<meta charset= "Utf-8"/>
<title></title>
<style type= "Text/css" >
*{}{margin:0;padding:0;}
Html{}{_background:url (About:blank);}/**//* prevent flashing in IE6, replace empty file with About:blank, reduce request * *
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;}
/**//** Mask Layer **/
#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);
}
/**//** Pop-up layer **/
#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>
<body>
<div class= "Wrap" >
<p>
I am the text I am the text I am the text I am the text I am the text I am the text
<br/>
I am the text I am the text I am the text I am the text I am the text I am the text
<br/>
I am the text I am the text I am the text I am the text I am the text I am the text
<br/>
I am the text I am the text I am the text I am the text I am the text I am the text
<br/>
I am the text I am the text I am the text I am the text I am the text I am the text
</p>
<input type= "button" id= "clickbtn" value= "Clike Me"/>
</div>
<div id= "Masklayer" ></div>
<div id= "Popup" >
<div class= "Content" >
<p> Center Centered Center center </p>
<p> Center Center Center Center </p>
<p> Center Center Center </p>
<p> Center 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>
