zoukankan      html  css  js  c++  java
  • js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下,

    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%;
    }
    
    .img_zfb{
        width:100%;
        height:100%;
    }
    .mid {
        font-size:12px;
        text-align:center;
        line-height:24px;
    }
    /** 遮罩层 **/ 
    #div_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);
    }
    /** 弹出层 **/ 
    #div_popup {
        display:none;
        width:240px;
        z-index:1000;
        left:50%;
        top:50%;
        position:fixed!important;
        /*margin-left:-120px !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;
    }
    
    
    </style>
    </head>
    <body>
    <div class="wrap">
      <p> 我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />
        我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />
        我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />
        我是正文我是正文我是正文我是正文我是正文我是正文我是正文 <br />
        我是正文我是正文我是正文我是正文我是正文我是正文我是正文 </p>
        <br /><br /><br /><br /><br /><br /><br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" id="btn_test" value="clike me" />
        <br /><br /><br /><br /><br />
      <div style="60px; height:900px; display:block; position:absolute; left:40px; background:red;"> </div>
    </div>
    <div id="div_masklayer"></div>
    <div id="div_popup">
      <div class="content">
        <h3>我是弹出层 有没有居中?</h3>
        <img class="img_zfb" id="img_zfb" src="http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png">
        <p class="mid">居中居中居中居中居中居中</p>
        <p class="mid">居中居中居中居中居中居中</p>
        <p>居中居中居中</p>
      </div>
    </div>
    <script type="text/javascript"> 
    
    (function ()
    {
        var btnclick = document.getElementById('btn_test');
        var divmasklayer = document.getElementById('div_masklayer');
        var divpoppu = document.getElementById('div_popup');
    
        btnclick.onclick = function ()
        {
            var popup = document.getElementById('div_popup');
            var divmasklayer = document.getElementById('div_masklayer');
            divmasklayer.style.display = 'block';
            popup.style.display = 'block';
            //var h = popup.clientHeight;
            var h = popup.Height;
            with(popup.style)
            {
                popup.style.marginLeft = -popup.clientWidth / 2 + 'px';
                popup.style.marginTop = -popup.clientHeight / 2 + 'px';
            }
        }
        
        divmasklayer.onclick=function(){ 
            document.getElementById('div_popup').style.display="none"; 
            document.getElementById('div_masklayer').style.display="none";
        }
    })();
    
    </script>
    </body>
    </html>

    参考出处:http://www.jb51.net/article/44354.htm

  • 相关阅读:
    【Leetcode】23. Merge k Sorted Lists
    【Leetcode】109. Convert Sorted List to Binary Search Tree
    【Leetcode】142.Linked List Cycle II
    【Leetcode】143. Reorder List
    【Leetcode】147. Insertion Sort List
    【Leetcode】86. Partition List
    jenkins 配置安全邮件
    python 发送安全邮件
    phpstorm 同步远程服务器代码
    phpUnit 断言
  • 原文地址:https://www.cnblogs.com/mq0036/p/7028588.html
Copyright © 2011-2022 走看看