JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例


Posted in Javascript onJuly 31, 2018

本文实例讲述了JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能。分享给大家供大家参考,具体如下:

HTML部分:

<div id="div">点击除开div的区域可以弹出弹窗</div>
<div id="cover"></div>
<div id="box">点击除开div和弹窗的区域可以关闭弹窗</div>

CSS部分:

#div{
  /*设置z-index属性必须设置position:relative或absolute*/ 
  position:relative;
  /*设置div位于遮罩的上方*/ 
  z-index:2;
  width:300px;
  height:200px;
  border:1px solid grey;
}
#cover{
  position:fixed;
  width:100%;
  height:100%;
  left:0;
  top:0;
  /*设置遮罩位于div的下方*/ 
  z-index:1;
}
#box{
  border:1px solid grey;
  /*当弹窗显示时,屏幕滚动时,弹窗始终保持位置固定在屏幕正中,不随屏幕滚动而变化位置*/
  position:fixed;
  width:400px;
  height:300px;
  left:50%;
  top:50%;
  /*配合left:50%和top:50%属性使得浮出层的中心默认在屏幕正中,margin-top为height的一半,margin-left为width的一半*/
  margin:-150px 0 0 -200px; 
  /*设置弹窗位于遮罩的上方*/ 
  z-index:2;
  /*开始时隐藏弹窗*/
  display:none;
}

JavaScript部分:

document.getElementById("cover").onclick = function() { 
  if (document.getElementById("box").style.display == "block") {
    document.getElementById("box").style.display = "none";
    document.getElementById("cover").style.background = "white";
  }
  else {
    document.getElementById("box").style.display = "block";
    document.getElementById("cover").style.background = "#aaa";
  }
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试一下运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
微信网页授权并获取用户信息的方法
Jul 30 #Javascript
axios简单实现小程序延时loading指示
Jul 30 #Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 #Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 #Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 #Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 #Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 #Javascript
You might like
用Flash图形化数据(一)
2006/10/09 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
node.js环境搭建图文详解
2018/09/19 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
党支部书记先进事迹
2014/01/17 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
学校创先争优活动总结
2014/08/28 职场文书
高中班主任评语
2014/12/30 职场文书
离婚协议书怎么写
2015/01/26 职场文书
解除同居协议书
2015/01/29 职场文书
售票员岗位职责
2015/02/15 职场文书
搞笑老公保证书
2015/02/26 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
在js中修改html body的样式
2021/11/11 Javascript
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android