js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
代码如下:
<!doctype html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{}{margin:0;padding:0;} html{}{_background:url(about:blank);} /**//* 阻止闪动 in IE6 , 把空文件换成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: /**//*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>我是弹出层 有没有居中?</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>
相关推荐
多读书读好书 2020-11-03
drdrsky 2020-06-16
gufudhn 2020-06-12
aSuncat 2020-06-11
PioneerFan 2020-06-10
沈宫新 2020-05-04
swiftwwj 2020-03-28
HSdiana 2020-03-28
葉無聞 2020-03-23
lyg0 2020-03-07
nercon 2020-02-22
STPace 2020-02-17
STPace 2019-12-30
冰蝶 2020-01-10
玫瑰小妖 2019-12-31
爱好HtmlCssJs 2019-12-31
行吟阁 2019-12-08