zoukankan      html  css  js  c++  java
  • (网页)中的简单的遮罩层

    html:

    <div id="test"></div>
    <div id="log_window">
    <!--<a href="javascript:cancel_shield()">关闭</a>-->
    <!--<img src="assets/css/images/loading.gif" />-->
    <p style="font-size:25px;color:#FFFFFF;"><strong>正在加载,请稍等</strong></p>
    </div>


    <style>
    html,body {
    margin:0;
    height:100%;
    }
    #test {
    100%;
    height:100%;
    background-color:#000000;
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    opacity:0.3;
    /*兼容IE8及以下版本浏览器*/
    filter: alpha(opacity=80);
    display:none;
    }

    #log_window {
    300px;
    height:200px;
    margin: auto;
    position: absolute;
    z-index:3;
    top: 10%;
    bottom: 0;
    left: 0;
    right: 0;
    display:none;
    }
    .ui-autocomplete{z-index:99999;}
    </style>

    遮罩层:
    function shield(){
    var s = document.getElementById("test");
    s.style.display = "block";

    var l = document.getElementById("log_window");
    l.style.display = "block";
    }

    function cancel_shield(){
    var s = document.getElementById("test");
    s.style.display = "none";

    var l = document.getElementById("log_window");
    l.style.display = "none";
    }

  • 相关阅读:
    Semaphore使用
    不可变对象
    Java锁--Lock实现原理(底层实现)
    Lambda Expressions and Functional Interfaces: Tips and Best Practices
    注解的作用
    linux命令大全
    linux &和&&,|和||
    SpringCloud 商品架构例子(一)
    springcloud starter(一)
    dubbo(一)
  • 原文地址:https://www.cnblogs.com/historylyt/p/7410309.html
Copyright © 2011-2022 走看看