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);
                });

  • 相关阅读:
    个人号微信机器人开发
    群控系统开发sdk服务端调用方法
    微信个人号scrm客服通信协议定义
    微信crm客服系统使用sdk定制开发(持续更新中!)
    微信客服crm系统接口定义(完善中)
    压测工具-ab
    设计模式之美学习-结构型-享元模式(二十五)
    设计模式之美学习-结构型-组合模式(二十四)
    设计模式之美学习-结构型-门面模式(二十三)
    设计模式之美学习-结构型-适配器模式(二十二)
  • 原文地址:https://www.cnblogs.com/itjeff/p/8431175.html
Copyright © 2011-2022 走看看