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 相关文章推荐
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 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
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python SVM 线性分类模型的实现
2019/07/19 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
python程序实现BTC(比特币)挖矿的完整代码
2021/01/20 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
老海军美国官网:Old Navy
2016/09/05 全球购物
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
python基础之类属性和实例属性
2021/10/24 Python
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL