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>

  • 相关阅读:
    Android语音识别功能使用
    Android 游戏开发必备的基础知识
    程序员需要具备的基本技能
    在IDEA上开发Android
    Eclipse中看java源代码
    Android高效开发:
    优秀程序员的十个习惯
    Android 自定义控件
    Android文件读写,保存数据
    java面试题(一)
  • 原文地址:https://www.cnblogs.com/GP1014336455/p/7606799.html
Copyright © 2011-2022 走看看