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. 学习GlusterFS（五）

    一,分布式文件系统理论基础 1.1 分布式文件系统出现 计算机通过文件系统管理,存储数据,而现在数据信息爆炸的时代中人们可以获取的数据成指数倍的增长,单纯通过增加硬盘个数来扩展计算机文件系统的存储容量 ...

  2. 学习Kvm（五）

    KVM(一)搭建部署与概述 一,KVM概述 1.1 虚拟化概述 在计算机技术中,虚拟化意味着创建设备或资源的虚拟版本,如服务器,存储设备,网络或者操作系统等等 [x] 虚拟化技术分类: 系统虚拟化(我 ...

  3. Python模块导入方式

    import导入方式 from...import导入方式  from...import... 导入模块相当于在此文件中写了所导入函数名(对比c/c++中的.h文件来理解),所以在之后使用导入的函数直接 ...

  4. 【C++】智能指针详解

    转自:https://blog.csdn.net/flowing_wind/article/details/81301001 参考资料:<C++ Primer中文版 第五版>我们知道除了静 ...

  5. CSS详细解读定位

    一 前言 CSS定位是CSS布局只能够重要的一环.本篇文章带你解读定位属性,可以让你更加深入的理解定位带来的一些特性,熟练使用CSS布局. 二 正文 1.文档流布局的概念 将窗体自上而下分成一行行, ...

  6. H5活动全屏滚动页面在安卓智能电视TV调试

    前段时间公司做一个线上活动,在电视上商品促销.产品的要求是每个商品介绍刚好满一屏,按下遥控器向下键可以整屏切换.这种功能如果实在PC端,实现起来非常容易,引用jQuery插件就能实现.但是在安卓智能电 ...

  7. java中如何使用接口继承（Extending Interfaces）

    5.接口继承(Extending Interfaces)和通话talk的功能.而Moto888更为高级,除了照相和通话功能以外,还有mp3的功能.接口继承到底有什么意义呢?马克-to-win:1)通过 ...

  8. 小程序tab栏可滑动,可点击居中demo

    效果图: 代码: <view class="container"> <!-- tab导航栏 --> <!-- scroll-left属性可以控制滚动条 ...

  9. Java学习笔记（韩顺平教育 b站有课程）

    Java重要特点 面向对象(oop) 健壮性:强类型机制,异常处理,垃圾的自动收集 跨平台性的 (一个编译好的.class可以在多个系统下运行) TEST.java -> TEST.class ...

  10. JWT&RSA实现单点登录(详细介绍)

    今天给大家讲一下基于JWT&RSA的单点登录(Single Sign On,简称SSO)解决方案 概念 首先要了解几个概念 单点登录(Single Sign On) JWT RSA 背景 为什 ...