css实现弹框
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实现弹框的更多相关文章
- css实现弹框垂直居中
原文链接:https://blog.csdn.net/sunny327/article/details/47419949/ <!DOCTYPE html><html> < ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- js+css jQuery实现页面后退执行 & 遮罩弹框
JS部分 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> < ...
- Jquary入门（添加 修改 表单元素）+ JSON+弹框
字符串拼接 计算机语言 都是 对 数据的处理(获取/修改数据) 添加元素 除了 固定的方法添加 以外 都是 字符串拼接(拼接成固定格式即可执行). 1.表单添加元素 append() 方 ...
- javascript中的弹框
大家都见过某度中的恶意广告,你关闭了又出来了!为何,JS来告诉你 效果猛戳此处 HTML <body> <h3 class="whiteColor">无法关 ...
- 自己写的基于bootstrap风格的弹框插件
自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...
- js弹框3秒后自动消失
开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...
- html实现弹框，并伴随遮罩层，且弹框居中
本文介绍的内容主要实现的功能有,出现弹框,并且伴随遮罩层,且弹框一直居中. html和js代码: <div id="hidebg"></div> <d ...
- bootstrap弹框
http://v3.bootcss.com/javascript/#modals 参考bootstrap官网 模态框做php后端 前端一直不行,但是很多时候 用到ajax都要用到弹框,一直在代码里面找 ...
随机推荐
- C++ - main()和_tmain(int argc, _TCHAR* argv[]) 的详细区别
一些程序中会发现主函数不是int main(),而是int _tmain(),而且头文件也不是<iostream>而是<stdafx.h>. 首先,这个_tmain()是为了支 ...
- 10.Flink实时项目之订单维度表关联
1. 维度查询 在上一篇中,我们已经把订单和订单明细表join完,本文将关联订单的其他维度数据,维度关联实际上就是在流中查询存储在 hbase 中的数据表.但是即使通过主键的方式查询,hbase 速度 ...
- 关于elementUI如何在表格循环列表里分别新增Tag的设计使用
话不多说,直接上代码.想要实现的目的是这样的,想要在表格里单独添加每一个tag 那么,需要解决的问题就是如何定义这每一个插槽里的输入框,把每个输入框以及里面插入的数据区分开. 研究了很久,最后选择了对 ...
- Linux内核, 编译一个自己的内核
本文,我们将一步一步地介绍如何从源代码编译和安装一个Linux内核.需要注意的是本指导基于Ubuntu 20.04版本编译安装,其它发行版可能会有差异. 在前面文章中我们反复提到过Linux内核, ...
- 10行 JavaScript 实现文本编辑器
背景 我们平时用到的浏览器编辑器功能都会比较多,实现的代码逻辑也会非常复杂,往往是作为一个单独插件被引入进来的.但是,现在我只需要一个很基本的内容输入内容编辑的功能,如:粗体.斜体.列表.对齐等.那要 ...
- 利用angular4和nodejs-express构建一个简单的网站（一）——构建前后端开发环境
学习了一段时间的angular4知识,结合以前自学的nodejs-express后端框架知识,做了一个利用angular4作为前端,node-express作为后端服务器的网站.这个网站的功能很简单, ...
- Linux 0.11源码阅读笔记-总览
Linux 0.11源码阅读笔记-总览 阅读源码的目的 加深对Linux操作系统的了解,了解Linux操作系统基本架构,熟悉进程管理.内存管理等主要模块知识. 通过阅读教复杂的代码,锻炼自己复杂项目代 ...
- msmpeng.exe阻止移动硬盘弹出
MsMpEng.exe 占用 该进程是微软反恶意软件服务的一个可执行文件,用户无法手动停止该进程. 首先运行 eventvwr.msc打开事件查看器,找到警告信息,查看是什么进程在阻止硬盘弹出. ...
- new String比字符串池浪费空间,为什么要用它?
对于下面程序中:ss0 = new String( "hello" );是用new()来新建对象的,存于堆中.每调用一次就会创建一个新的对象.当然从节省空间的角度来讲,肯定不如st ...
- MySQL的安装详细教程
一.下载MySQL数据库并创建初始化文件 1.下载MySql数据压缩包-----下载网址:https://dev.mysql.com/downloads/mysql/ 2.选择兆数最少的那个下载 3. ...