js实现弹框效果


Posted in Javascript onMarch 24, 2021

利用display来控制弹窗的现实和隐藏

<!-- 弹出层 -->
<div id="popLayer"></div> <!--黑色蒙版 -->
<div id="popBox">
  <div class="close">
   X
  </div>
  <div>
   <!-- 内容 -->
 </div>
</div>

js:

//点击关闭按钮
var close = document.querySelector(".close")
close.onclick = function () {
 console.log("点击")
 var popBox = document.getElementById("popBox");
 var popLayer = document.getElementById("popLayer");
 popBox.style.display = "none";
 popLayer.style.display = "none";
}
 
 
//需要显示时调用
var popLayer = document.getElementById("popLayer");
popBox.style.display = "block";
popLayer.style.display = "block";

CSS:

/* 弹出层 */
#popLayer {
 display: none;
 background-color: #000;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 10;
 opacity: 0.6;
}
 
/*弹出层*/
#popBox {
 display: none;
 background-color: #FFFFFF;
 z-index: 11;
 width: 220px;
 height: 300px;
 position: fixed;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 margin: auto;
}
 
/*关闭按钮*/
#popBox .close {
 width: 20px;
 height: 20px;
 border-radius: 50%;
 position: absolute;
 border: 1px solid #fff;
 color: #fff;
 text-align: center;
 line-height: 20px;
 right: 8px;
 top: 8px;
 z-index: 50;
}
 
#popBox .close a {
 text-decoration: none;
 color: #2D2C3B;
}

 

Javascript 相关文章推荐
javascript 图片上传预览-兼容标准
Jun 01 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
Bootstrap精简教程
Nov 27 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
vue实现购物车加减
May 30 Javascript
vue实现倒计时功能
Mar 24 #Vue.js
Ajax实现页面无刷新留言效果
利用promise及参数解构封装ajax请求的方法
AJAX检测用户名是否存在的方法
Mar 24 #Javascript
js正则匹配markdown里的图片标签的实现
浅谈react路由传参的几种方式
Mar 23 #Javascript
一百多行代码实现react拖拽hooks
You might like
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
js css自定义分页效果
2017/02/24 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python程序语言快速上手教程
2012/07/18 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
python发送邮件实例分享
2017/07/28 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
宾馆安全管理制度
2015/08/06 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
Java spring单点登录系统
2021/09/04 Java/Android