手写页面蒙层弹窗 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
          margin:0;
          padding:0;
          font-size:16px;
        }
        .hide{
          display:none;
        }
        .div-back{
          height:1200px;
          width:100%;
          background-color:#add8e6;    
        }
        .div-back li{
            font-size:5rem;
        }
        .div-back #btn-pop{
            width:60px;
            height:30px;
            background-color:#eee;
            text-align:center;
            line-height:30px;
          }
        .pop-window{
          position:absolute;
          background-color:rgba(0,0,0,0.5); 
          width:100%;
          height:100%;  
        }
        .pop-window .pop-container{
            position:fixed;
            border-radius:10px;
            padding:2rem;
            width:80%;
            left:10%;
            background-color:#5f9ea0;
        }
        .pop-window .pop-container .footer .pop-close{
            margin:2rem auto;
            width:60px;
            height:30px;
            background-color:#eee;
            text-align:center;
            line-height:30px;
        }
    </style>
</head>
<body>
    <div class="pop-window hide">
      <div class="pop-container">
         <ul>
            <li>this is the very long long content of pop window.</li>
           <li>this is the very long long content of pop window.</li>
           <li>this is the very long long content of pop window.</li>
           <li>this is the very long long content of pop window.</li>
           <li>this is the very long long content of pop window.</li>
           <li>this is the very long long content of pop window.</li>
           <li>this is the very long long content of pop window.</li>
        </ul>
        <div class="footer">
          <div class="pop-close" id="pop_close" onclick="close_window();">close</div>
        </div>
        
      </div>
    </div>
    <div class="div-back">
      <div id="btn-pop" onclick="pop_window();">pop</div>
      <ul>
        <li>this is the very long long content.</li>
         <li>this is the very long long content.</li>
         <li>this is the very long long content.</li>
         <li>this is the very long long content.</li>
         <li>this is the very long long content.</li>
         <li>this is the very long long content.</li>
      </ul>
    </div>
</body>
</html>
<script>
    var $=function(selector){
      return document.querySelector(selector);
    }
    function pop_window(){
       $('.pop-window').style.display = "block";
      // calculate lengh of top.使弹框垂直居中
      var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
      var h_pop = $('.pop-container').offsetHeight;
      var topval = (h-h_pop)/2;
      $('.pop-container').style.top=topval +"px";

      // stop scroll of back layer.禁止蒙层底部滚动
      $('html').style.overflow="hidden";
      $('body').style.overfolw="hidden";
    }
    function close_window(){
      $('.pop-window').style.display="none";
      $('html').style.overflow="auto";
      $('body').style.overflow="auto";
    }

</script>

 

posted @ 2018-05-18 16:27  极客小乌龟  阅读(550)  评论(0)    收藏  举报