zoukankan      html  css  js  c++  java
  • 通用遮盖层,即遮罩层,简单实用

    <div id="cover" style="display: none;">
    </div>

    $("#cover").css({ left:0, top: 0, height: "100%", "100%", position: "fixed", "background-color": 'black', "z-index": 999, opacity: 0.7, display: "block" });

    $("#cover").css({ left:0, top: 0, right:0, bottom:0, position: "fixed", "background-color": 'black', "z-index": 999, opacity: 0.7, display: "block" });

    //上面的遮罩层完善如下:

    <html>
    <head>
    <style type="text/css">
    #loading{
    100%;
    height: 100%;
    position:fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 999;
    opacity: 0.6;
    display: none;
    }

    #loading img {
    50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px; /* 高度的一半 */
    margin-left: -25px; /* 宽度的一半 */
    }

    </style>
    <script src='jquery-1.8.2.min.js'></script>
    <script type='text/javascript'>
    function showpop()
    {
    $("#loading").toggle();
    }
    </script>
    </head>
    <body>
    <div id="loading">
    <img src="loading.gif" alt="loading">
    </div>
    <input type="button" id='btn' value='click me' onclick="showpop()">
    </body>
    </html>

    //文本框字数限制示例:

    <div class="edit-text">
                        <textarea id="txtUserText" placeholder="写下你此刻的想法……"></textarea>
                        <div class="edit-technology"><span id="text-count">0</span>/100</div>
                    </div>

    $("#txtUserText").on("input propertychange", function () {
                    var $this = $(this),
                        _val = $this.val(),
                        count = "";
                    if (_val.length > 100) {
                        $this.val(_val.substring(0, 100));
                    }
                    count = $this.val().length;
                    $("#text-count").text(count);
                });

  • 相关阅读:
    (18)随机数
    JMeter 正则表达式提取器(二)
    swiper控件(回调函数)
    移动测试之appium+python 导出报告(六)
    移动测试之appium+python 简单例子(五)
    移动测试之appium+python 入门代码(四)
    移动测试之appium+python 入门代码(三)
    移动测试之appium+python 入门代码(二)
    移动测试之appium+python 环境安装(一)
    网站架构模式(二)
  • 原文地址:https://www.cnblogs.com/itjeff/p/8431175.html
Copyright © 2011-2022 走看看