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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
javascript 必知必会之closure
Sep 21 Javascript
Jquery ui css framework
Jun 28 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
记录一次websocket封装的过程
Nov 23 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
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
python配置文件写入过程详解
2019/10/19 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
俄语专业毕业生推荐信
2013/10/28 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
革命电影观后感
2015/06/18 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP