Home > Web Front-end > JS Tutorial > js css implements mask centered pop-up layer (scrolls with the browser window scroll bar)_javascript skills

js css implements mask centered pop-up layer (scrolls with the browser window scroll bar)_javascript skills

WBOY
Release: 2016-05-16 17:09:47
Original
1082 people have browsed it

js css realizes the masked center pop-up layer (scrolling with the browser window scroll bar)

Copy the code The code is as follows:





< ;style type="text/css">
*{}{margin:0;padding:0;}
html{}{_background:url(about:blank);} /**//* Prevent flashing in IE6, replace empty files with about:blank, reduce requests */
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);
}
/**//** Popup 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;}

< /head>



I am the main text I am the main text I am the main text I am the main text I am the main text I am Text I am text


I am text I am text I am text I am text I am text I am text I am text


I I am the main text I am the main text I am the main text I am the main text I am the main text I am the main text I am the main text


I am the main text I am the main text I am the main text I am the main text I am the main text I am the main text I am the main text


I am the main text I am the main text I am the main text I am the main text I am the main text I am the main text I am the main text





< div id="popup">

Is the popup layer centered?


Center, center, center, center, center, center


Center, center, center, center, center


Center in center Center in center


Center in center center





< ;/body>


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template