zoukankan      html  css  js  c++  java
  • 手写页面蒙层弹窗

    <!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>
  • 相关阅读:
    CodeForces 219D Choosing Capital for Treeland (树形DP)
    POJ 3162 Walking Race (树的直径,单调队列)
    POJ 2152 Fire (树形DP,经典)
    POJ 1741 Tree (树的分治,树的重心)
    POJ 1655 Balancing Act (树的重心,常规)
    HDU 2196 Computer (树形DP)
    HDU 1520 Anniversary party (树形DP,入门)
    寒门子弟
    JQuery选择器(转)
    (四)Web应用开发---系统架构图
  • 原文地址:https://www.cnblogs.com/gopark/p/9056789.html
Copyright © 2011-2022 走看看