zoukankan      html  css  js  c++  java
  • JS特效 遮罩层


    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    * {
    margin: 0px;
    padding: 0px;
    }

    .mask {
    100%;
    /*height: 500px;*/
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: black;
    opacity: 0.5;
    }

    .show {
    500px;
    height: 300px;
    position: fixed;
    top: 100px;
    left: 300px;
    background-color: white;
    z-index: 999;
    }
    </style>
    </head>

    <body>
    <!--遮罩层-->
    <div class="mask" hidden="hidden"></div>
    <!--弹出层-->
    <div class="show" hidden="hidden">


    </div>
    <input type="button" value="点 出 来" onclick="show_plus()" />

    </body>

    </html>
    <script>
    var mask = document.getElementsByClassName('mask')[0];
    var show = document.getElementsByClassName("show")[0];

    var c_height = document.documentElement.clientHeight;
    var c_width = document.documentElement.clientWidth;

    mask.style.height = c_height + "px";
    show.style.left = c_width / 2 - 250 + "px";
    show.style.top = c_height / 2 - 150 + "px";

    function show_plus() {
    mask.removeAttribute("hidden");
    show.removeAttribute("hidden");
    }

    mask.onclick = function() {
    mask.setAttribute("hidden", "hidden");
    show.setAttribute("hidden", "hidden");
    }

    window.onresize = function() {
    var c_height = document.documentElement.clientHeight;
    var c_width = document.documentElement.clientWidth;

    mask.style.height = c_height + "px";
    show.style.left = c_width / 2 - 250 + "px";
    show.style.top = c_height / 2 - 150 + "px";
    }
    </script>

  • 相关阅读:
    AIX 开机启动网络服务配置
    aix 6+ mount 光驱
    AIX 系统中 PVID 的含义与作用
    lsslot
    hp小机定位网卡位置
    HP 7440老机器重启
    ntp -q 输出说明
    使用过滤器实现网站访问计数器的功能
    过滤器:-------------创建并配置过滤器:
    什么是Servlet,Servlet的作用,生命周期,如何创建、配置Servlet
  • 原文地址:https://www.cnblogs.com/little-rock/p/7601541.html
Copyright © 2011-2022 走看看