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. Dubbo 如何停机？

    Dubbo 是通过 JDK 的 ShutdownHook 来完成优雅停机的,所以如果使用 kill -9 PID 等强制关闭指令,是不会执行优雅停机的,只有通过 kill PID 时,才 会执行.

  2. 在 Spring AOP 中，关注点和横切关注的区别是什么？

    关注点是应用中一个模块的行为,一个关注点可能会被定义成一个我们想实现的 一个功能. 横切关注点是一个关注点,此关注点是整个应用都会使用的功能,并影响整个应 用,比如日志,安全和数据传输,几乎应用的每个 ...

  3. Python - 分支循环、可迭代对象与迭代器

  4. Creating a File Mapping Object

    创建一个文件映射对象 映射一个文件的第一步是通过调用CreateFile函数来打开一个文件.为了确保其他的进程不能对文件已经被映射的那一部分进行写操作,你应该以唯一访问(exclusive acces ...

  5. stylus css tooltips 工具提示

    tooltips 纯css工具提示 bubbles-tooltips 查看效果 演示 安装 npm install tooltips --save 使用 在 gulp 中使用 gulp var gul ...

  6. 关于css中选择器的小归纳（一）

    关于css中选择器的小归纳 一.基本选择器 基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器(类似于a,div,body,ul),类选择器(我们在HTML标签里面为其添加的clas ...

  7. 我试试这个昵称好使不队项目NABCD指路

    我试试这个昵称好使不队项目NABCD指路:https://www.cnblogs.com/team-development/p/14617203.html

  8. python---100以内所有素数

    def get_primes(): """ 100以内的所有素数:每个数都对从2到其本身前一个数做整除, 遇到能整除就换下一个数. 如果从2到去本身前一个数都没有整除,则 ...

  9. springboot+springsecurity+mybatis plus之用户授权

    文章目录 前言 一.导入坐标 二.Users实体类及其数据库表的创建 三.controller,service,mapper层的实现 四.核心--编写配置文件 五.无权限界面和登录界面的实现 前言 即 ...

  10. Java实现单链表的逆序打印

    思路1:可以将链表进行反转,然后进行数据的输出即可,单链表反转地址如下https://blog.csdn.net/Kevinnsm/article/details/113763272 这个思路1肯定有 ...