CSS遮罩层实现思路：
遮罩层的影藏方式一般有display:none、visibility:none、opacity: 0。
遮罩层从无到有的出现效果一般是opacity值从0~1，结合transition属性使用。
遮罩层一般位于页面Z轴方向前面，如果遮罩层只设置opacity,由于其z-index靠前，会导致触发不到打开按钮，处理这个问题的处理方式有两种：
    1、设置按钮的z-index（5），在遮罩层出现后设置的z-index（如这里的55）要是最高。
    2、遮罩层结合visibility使用，即使打开按钮不设置z-index值，在点击按钮时，是触发不到遮罩层的，可通过脚本验证。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>

    <style>

        * {

            padding: 0;

            margin: 0;

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

            line-height: 1.5;

            -webkit-tap-highlight-color: transparent;

        }

        /*页面按照750px的设计稿，适应vw/vh布局，100vw / 750px * 100px , 1rem = 100px*/

        html {

            font-size: 13.333333333333333333333333333333vw;

        }

        body {

            position: relative;

            width: 100%;

            height: 100%;

            min-width: 320px;

            max-width: 540px;

            margin: 0 auto;

        }

        @media screen and (max-width: 320px) {

            html {font-size: 50px}

        }

        @media screen and (min-width: 540px) {

            html {font-size: 70px;}

        }

        a { text-decoration: none;}

        .openMask {

            position: relative;

            display: block;

            z-index: 5;

            width: 3rem;

            height: .9rem;

            margin: 0.6rem;

            color: #999;

            font-size: 0.5rem;

            font-weight: 800;

            text-align: center;

            line-height: .9rem;

            border: 2px solid;

        }

        /*伪元素的真正宽高是openMask的宽高减去border值（4px)，也就是content box大小，但定位开始是padding box*/

        .openMask:after {

            position: absolute;

            z-index: -2;

            content: '';

            top: 0;

            left: 50%;

            width: 0;

            height: 100%;

            transition: all .1s;

            transform: translateX(-50%);

        }

        .openMask:active {color: #fff}

        .openMask:active:after {

            width: 100%;

            background: #999;

        }

        .maskLayer {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            opacity: 0;

            visibility: hidden;

            background: rgba(0,0,0,.3);

            transition: all .3s;

        }

        .content {

            position: absolute;

            bottom: -8rem;

            width: 100%;

            height: 8rem;

            background: #fff;

            border-radius: .4rem .4rem 0 0;

            transition: all .6s;

        }

        .maskLayer:target {

            z-index: 55;

            opacity: 1;

            visibility: visible;

        }

        .maskLayer:target .content {

            bottom: 0;

        }

        .closeMask {

            position: absolute;

            top: 3vw;

            right: 6vw;

            font-size: 6vw;

        }

        .closeMaskLayer {

            position: absolute;

            z-index: -4;

            display: block;

            width: 100%;

            height: 100%;

        }

    </style>

    <title>target实现弹框</title>

    <script src="jquery-3.1.0.min.js"></script>

</head>

<body>

    <a href="#maskLayer" class="openMask">OPEN</a>

    <div href="#" id="maskLayer" class="maskLayer">

        <a href="#" class="closeMaskLayer"></a><!--用于遮罩关闭-->

        <div class="content">

            <a href="#" class="closeMask">✕</a>

        </div>

    </div>

    <script>

        $("#maskLayer").click(function() {

            console.log("visibility");

        });

    </script>

</body>

</html>

回过头再做再看一些内容时，发现曾经的疑问豁然开朗，不是你不行，而是你要矢志不渝地前行才能到达你需要的高度。

css实现弹框的更多相关文章

  1. css实现弹框垂直居中

    原文链接:https://blog.csdn.net/sunny327/article/details/47419949/ <!DOCTYPE html><html> < ...

  2. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  3. js+css jQuery实现页面后退执行 & 遮罩弹框

    JS部分 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> < ...

  4. Jquary入门（添加 修改 表单元素）+ JSON+弹框

    字符串拼接 计算机语言 都是 对  数据的处理(获取/修改数据)  添加元素  除了  固定的方法添加 以外 都是   字符串拼接(拼接成固定格式即可执行). 1.表单添加元素  append() 方 ...

  5. javascript中的弹框

    大家都见过某度中的恶意广告,你关闭了又出来了!为何,JS来告诉你 效果猛戳此处 HTML <body> <h3 class="whiteColor">无法关 ...

  6. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  7. js弹框3秒后自动消失

    开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...

  8. html实现弹框，并伴随遮罩层，且弹框居中

    本文介绍的内容主要实现的功能有,出现弹框,并且伴随遮罩层,且弹框一直居中. html和js代码: <div id="hidebg"></div> <d ...

  9. bootstrap弹框

    http://v3.bootcss.com/javascript/#modals 参考bootstrap官网 模态框做php后端 前端一直不行,但是很多时候 用到ajax都要用到弹框,一直在代码里面找 ...

随机推荐

  1. mybatis 和 hibernate 本质区别和应用场景

    Hibernate: 是一个标准 ORM 框架(对象关系映射).入门门槛较高,不需要程序员写 SQL,SQL语句自动生成. 对 SQL 语句进行优化.修改比较困难. 应用场景: 适用于需求变化不多的中 ...

  2. 创建POJO

    创建一个名为student.java的POJO. 第一步,在包里面创建一个student类,右键点击包,点击新建,再点击创建一个类. 第二步,输入类名,点击完成. 第三步,输入数据类型和主键名,再写一 ...

  3. 单片机ram和rom的区别

    单片机运行时需要调用某个程序/函数/固定数据时就需要读取ROM,然后在RAM中执行这些程序/函数的功能,所产生的临时数据也都存在RAM内,断电后这些临时数据就丢失了.ROM:(Read Only Me ...

  4. led指示灯电路图大全（八款led指示灯电路设计原理图详解）

    led指示灯电路图大全(八款led指示灯电路设计原理图详解) led指示灯电路图(一) 图1所示电路中只有两个元件,R选用1/6--1/8W碳膜电阻或金属膜电阻,阻值在1--300K之间. Ne为氖泡 ...

  5. 基于腾讯开源的msec来进行php开发模块

    msecphp 毫秒服务引擎(Mass Service Engine in Cluster)是一个开源框架,适用于在廉价机器组成的集群上开发和运营分布式后台服务. 毫秒服务引擎集RPC.名字发现服务. ...

  6. Unity用Input.touches实现手机端多点触控

    多点触控的方法,两边的触控互不干扰: 主要采用Input.touches的相关属性进行操作: 而采用IPointerDrag接口会造成两个drag的相互干扰: 代码如下: using System.C ...

  7. nodejs创建服务器

      'use strict'; //加载http模块: const http = require('http'); //创建一个http服务: const server = http.createSe ...

  8. Blazor技术开发了一个访客管理系统

    简单介绍一下系统功能 该系统为了在疫情期间能很好管理访客登记做好风险管控,同时可以整合智能设备做到自动确认并跟踪访客的行动轨迹,该项目完全开源. 系统流程 访客可以同通过手机进行预注册,同时上传照片, ...

  9. 基于LAMP离线部署zabbix3.2.11

    zabbix是个什么东西这里不再赘述,先安装lamp再安装zabbix. 1.   安装依赖插件(把下面PHP那些依赖库全部都装了) #yum install -y gcc gcc-c++ opens ...

  10. .Net Core 进程守护之Supervisor使用

    1.执行下列命令安装supervisor wget https://mirrors.tuna.tsinghua.edu.cn/epel/epel-release-latest-7.noarch.rpm ...