zoukankan      html  css  js  c++  java
  • css---遮罩层

    <div id="body"> 显示页面的全部内容
        <div id="open">打开弹框</div>
    </div>
    //页面的遮罩层
    <div id="cover"></div>
    //页面的弹出框
    <div id="modal">
        <div id="close">关闭弹框</div>
    </div>
    <script>
    $(document).ready(function(){ 
         $("#open").click(function() {
               cover.style.display="block";   //显示遮罩层
               modal.style.display="block";   //显示弹出层
         })
          $("#close").click(function() {
              cover.style.display="none";   //隐藏遮罩层
              modal.style.display="none";   //隐藏弹出层
          })
    })
    </script>
    #cover{ 
        position:absolute;left:0px;top:0px;
        background:rgba(0, 0, 0, 0.4);
        100%;  /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/
        height:100%;
        filter:alpha(opacity=60);  /*设置透明度为60%*/
        opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
        display:none; 
        z-Index:999;  
    }
    #modal{ 
        position:absolute;
        500px;
        height:300px;
        top:50%;
        left:50%;
        background-color:#fff;
        display:none;
        cursor:pointer;
        z-Index:9999;  
    }
  • 相关阅读:
    HashMap和Hashtable的区别
    装箱以及拆箱
    泛型
    LinkedList和ArrayList异同
    ArrayList的输出方式以及ArrayList的因子增长数
    limit的优化
    mysql五大数据引擎的分别
    ios
    css3(1)
    php
  • 原文地址:https://www.cnblogs.com/wangshishuai/p/10097860.html
Copyright © 2011-2022 走看看