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. java-設計模式-原型模式

    原型模式 是一种创建型设计模式, 使你能够复制已有对象, 而又无需使代码依赖它们所属的类. 問題: 如果我們要複製一個類實例: 首先, 你必须新建一个属于相同类的对象. 然后, 你必须遍历原始对象的所 ...

  2. spring-boot-learning-监听事件

    Springboot扩展了Spring的ApplicatoionContextEvent,提供了事件: ApplicationStartingEvent:框架启动事件 ApplicationEnvir ...

  3. 什么是可重入锁（ReentrantLock）？

    举例来说明锁的可重入性 public class UnReentrant{ Lock lock = new Lock(); public void outer(){ lock.lock(); inne ...

  4. 基于Python3实现的各类数据库连接和连接池

    基于Python3的各类数据库连接和连接池, 支持数据库有: Mysql(MariaDB), Oracle, PostgreSQL(GreenPlum), Vertica, Redis, MongoD ...

  5. 手把手教你撸个vue2.0弹窗组件

    手把手教你撸个vue2.0弹窗组件 在开始之前需要了解一下开发vue插件的前置知识,推荐先看一下vue官网的插件介绍 预览地址 http://haogewudi.me/kiko/inde... 源码地 ...

  6. java中抛出throw关键字是怎么用的？ 举例？

    5.抛出throw关键字 马克-to-win:我们先说5/0的原理,当程序运行到5/0的时候,java系统JVM会在后台new出一个除0异常实例,之后把这个实例传入catch块儿供开发者使用.马克-t ...

  7. PAT B1031查验身份证

    一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,10,5,8, ...

  8. PAT B1013 数素数

    输入样例: 5 27   输出样例: 11 13 17 19 23 29 31 37 41 43 47 53 59 61 67 71 73 79 83 89 97 101 103 解题思路: 从2开始 ...

  9. Spring-级联赋值

    一.级联赋值第一种方法 1.创建Emp类 package com.bean; public class Emp { private String EName; private String gende ...

  10. Linux磁盘之inode

    什么是 inode ? 文件储存在硬盘上,硬盘的最小存储单位叫作"扇区"(Sector).每一个扇区储存512字节(至关于0.5KB).操作系统读取硬盘的时候,不会一个个扇区地读取 ...