zoukankan      html  css  js  c++  java
  • CSS 实现遮罩层弹窗效果

    原理:

    写一个遮罩功能div,宽度高度均为100%,设置背景色,设置透明度,设置z-index 值为倒数第二大,目的为了在倒数第二层,把页面显示的内容给盖住!

    写一个弹出功能div,设置z-index 值为最大,目的要显示在最上层!

    html代码:

    <div id="body"> 显示页面的全部内容
        <div id="open">打开弹框</div>
    </div>
    //页面的遮罩层
    <div id="cover"></div>
    //页面的弹出框
    <div id="modal">
        <div id="close">关闭弹框</div>
    </div>

    jquery代码:

    <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>

    CSS代码:

    #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;  
    }
  • 相关阅读:
    线程、协程、Goroutine的区别和联系
    Docker是如何实现跨平台的等问题
    Docker容器与虚拟机有什么区别?
    带www和不带www的域名有什么区别
    netty 入门前阅读
    netty 入门示例
    thingsboard 入门教程
    RSAUtil 工具类
    java zip 打包
    redis 详细讲解
  • 原文地址:https://www.cnblogs.com/Isabella-CC/p/8195739.html
Copyright © 2011-2022 走看看