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都要用到弹框,一直在代码里面找 ...
随机推荐
- @Required 注解 ？
这个注解表明 bean 的属性必须在配置的时候设置,通过一个 bean 定义的显式的 属性值或通过自动装配,若@Required 注解的 bean 属性未被设置,容器将抛出 BeanInitializ ...
- IOC 的优点是什么？
IOC 或 依赖注入把应用的代码量降到最低.它使应用容易测试,单元测试不再需 要单例和 JNDI 查找机制.最小的代价和最小的侵入性使松散耦合得以实现.IOC 容器支持加载服务时的饿汉式初始化和懒加载 ...
- Java 有没有 goto？
goto 是 Java 中的保留字,在目前版本的 Java 中没有使用.(根据 James Gosling (Java 之父)编写的<The Java Programming Language& ...
- Solution Architect
Solution Architect How to become a solution architect - CareerExplorer What does a solution architec ...
- ES6实战：新数字方法
本文翻译自:https://www.sitepoint.com/es6... 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 本文介绍了ES6中全新的数字方 ...
- 牛客网-剑指Offer 二维数组中的查找
题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...
- CCF201503-2数字排序
问题描述 给定n个整数,请统计出每个整数出现的次数,按出现次数从多到少的顺序输出. 输入格式 输入的第一行包含一个整数n,表示给定数字的个数. 第二行包含n个整数,相邻的整数之间用一个空格分隔,表示所 ...
- 微信小程序拖动列表功能
WXML部分 1 <view class="index"> 2 3 <!-- 数据展示区 --> 4 <scroll-view 5 class=&qu ...
- 记一次使用git报错，解决Unable to negotiate with **** port 22: no matching host key type found. Their offer: ssh-rsa
windows电脑重装系统,去官网下载了最新的git安装,一路next下来,打开bash按老路子设置,生成公钥 git config --global user.name "yourname ...
- LC-707
设计链表的实现.您可以选择使用单链表或双链表.单链表中的节点应该具有两个属性:val 和 next.val 是当前节点的值,next 是指向下一个节点的指针/引用.如果要使用双向链表,则还需要一个属性 ...