js实现遮罩弹出层居中

最新推荐文章于 2019-06-29 19:12:13 发布

jkpi888

最新推荐文章于 2019-06-29 19:12:13 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签：遮罩层弹出层 Javascript

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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>

文章转载自： JS让打开的窗口居中 http://www.studyofnet.com/news/250.html

jkpi888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现遮罩弹出层居中

js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) *{}{margin:0;padding:0;} html{}{_background:url(about:blank);} /**//* 阻止闪动 in IE6 , 把空文件换成about:blank , 减少请求 */ body{}{backg
复制链接

扫一扫