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 相关文章推荐
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 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删除HTMl标签的实现代码
2013/06/30 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
微信小程序实现简单的select下拉框
2020/11/23 Javascript
python机器学习之神经网络(三)
2017/12/20 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Python 类的特殊成员解析
2018/06/20 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
python调用接口的4种方式代码实例
2019/11/19 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
养殖行业的创业计划书
2014/01/05 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
教师自荐信范文
2015/03/06 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL