js点击内容div之外的遮罩层，关闭弹窗，怎么显示下层的内容

最新推荐文章于 2022-08-12 13:31:31 发布
最新推荐文章于 2022-08-12 13:31:31 发布
阅读量419 收藏
点赞数
分类专栏： Web  文章标签： javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HDdgut/article/details/105345714
版权

原理：用z-index设置蒙层和div的层级,蒙层在div下面，点击div的时候，不会触发蒙层点击事件

前提。蒙层和div不是嵌套关系。

 

子div点击事件阻止冒泡：

event.stopPropagation();

怎么显示下层的内容

设置：background: transparent;

或    opacity: 0;（但是如果有其他内容会影响显示）

HDdgut
关注
专栏目录
javascript div 遮罩层封锁整个页面
10-29
在客户端浏览器中，可以在某个时机使用javascript把一个div作为遮罩层，来封锁整个页面。
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
10-18
主要介绍了JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能,结合实例形式分析了javascript事件响应及页面元素属性动态操作弹出与关闭遮罩层相关实现技巧,需要的朋友可以参考下
js点击遮罩层内容以外的地方隐藏遮罩
肖肖肖丽珠的博客
05-22 405
combatBoxc内容区域 combatBox整个遮罩层最外面的div <div class="combatBox" style="display: block;"> <div class="combatBoxct"> <p class="allCombat"><i class="fontcolor">总战斗值:</i><i class="fontcolor" data-...
添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件
Aa12364567的博客
08-12 2505
代码】添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件。
JavaScript---点击div遮罩层，关闭div
JamieCheung的专栏
05-02 3847
id="productDetailDiv"，是带遮罩的大div，id="addprodtocar"，是不带遮罩的div// 点击div框外，关闭div $('#productDetailDiv').click(function(event) { $('#productDetailDiv').hide(); }); $("#addprodtocar").click(function() { ...
div悬浮在屏幕的中间及点击按钮关闭弹出框
weixin_30912051的博客
09-27 466
#fd { position: fixed; z-index: 999; width: 109px; height: 323px; top: 71%; right: 1%; margin: -50px 0 0 -50px; /*border: 1px solid red;*/ } <di...
前端蒙版遮罩层点击事件穿透
qq_36205027的博客
02-12 1万+
&lt;div style={{ zIndex: 1000, width: "100%", height: "4rem", position: "relative" }}&gt; &lt;div style={{ position: 'absolute', top: "33%", left: "45%", width:
js弹出div并显示遮罩层
12-09
代码如下: //——————–弹出层——————- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { ...
JS移动端点击弹出遮罩层
07-03
接下来，我们编写JavaScript代码（假设文件名为`main.js`）来处理按钮点击事件和遮罩层的显示与隐藏： ```javascript document.getElementById('toggleMask').addEventListener('click', function() { var mask = ...
html 点击遮罩关闭层,JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例...
weixin_42349005的博客
05-30 388
Box">点击除开div和弹窗的区域可以关闭弹窗CSS部分：属性必须设置position:relative或absolute*/position:relative;/*设置div位于遮罩的上方*/z-index:2;width:300px;height:200px;border:1px solid grey;}#cover{position:fixed;width:100%;height:1...
超级爽的 js 遮罩层 谦容 FF IE 支持拖动...
06-02
最近项目需要找了个超级爽的 js 遮罩层 谦容 FF IE 支持拖动,与大家分享...
阻止上层div触发点击事件，并触发下层div的点击事件
nayi_224的博客
12-19 5846
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div onclick="aa(1);" style="width: 200px;height: 20...
如何让被遮挡层可以进行事件点击？（纯CSS方法）
【前端 · 小讴】的博客
12-11 7228
非常简单： 外层（被遮挡的层）{ pointer-events: none; } 内层（要发生事件的层）{ pointer-events: auto; } pointer-events属性本身有很多取值，但只有none和auto可以用在浏览器上，其他都只能应用在SVG上 取值none：元素永远不会成为鼠标事件的target 取值auto：与pointer-events...
小程序防止点击遮罩层后遮罩层下面也反应（有点击事件）
热门推荐
MoTec的博客
08-11 1万+
最近在做自定义弹窗，不免会使用到遮罩层或者说蒙层。 但是关键是，有遮罩层后，再点击遮罩层下的组件，依然会产生点击事件。 那如何解决这个问题呢 ？ 网上给出了几种方法 1 . 在遮罩层 view 中添加 catchtouchmove 点击事件。因为 catch 事件绑定可以阻止冒泡事件向上冒泡。 &amp;amp;lt;view class=&amp;quot;mask&amp;quot; catchtouchmove=&amp;quot;preventTo...
解决遮罩层不能覆盖整个页面问题
Tworld
07-18 8515
最近的项目需要一个点击，然后弹出遮罩层的效果，于是在页面中加了一个遮罩层（设定高度为100%）。 但是今天偶然发现，遮罩层只能遮住一屏的高度，若页面比一屏高的话，只要向下滚就可以发现没有被遮住的部分。 查资料得知，出现这种现象的原因是虽然设置了遮罩层的高度为100%，但是js代码执行的时候自动获取的其实还是当前屏幕的高度，因此导致它只能遮住一屏的内容。那么解决的方案也就是获取屏幕高度和当前页面
点击遮罩层内容以外的区域关闭遮罩层
于离别之朝束起约定之花的博客
09-24 2070
最近的一个项目，设计稿上有个地方是弹出层，但是没有看见关闭按钮或者关闭图片，这让我很疑惑，这要怎么关闭？用户体验不会变差么？但想了想无所谓了，大不了以后再改，加个按钮或者图片点击隐藏而已，于是我就按着设计稿上的做了，今天特地分享出来（默认样式因为是单独一个css文件，太长，就用 * 强制清除默认样式了，但是推荐不这样用，至于为什么可以百度）。 接下来贴代码，首先是css的： * { ...
jQuery 实现弹出框点击自身以外的地方（遮罩层）关闭弹出框
好巧的博客
12-20 7284
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。应用场景：有一个按钮，点击弹出一个弹框，里面被放置一些内容，点击弹框本身弹框是不会被关闭的，但是点击弹框以为的遮罩层弹框就会被关闭。将以下代码复制下来到本地直接查看效果，重要地方都有注解。如果本篇文章对你有帮助的话，很高兴能够帮助上你。'弹出框以外的部分被点击了''弹出框内部被点击了'
js-实现蒙层功能
weixin_45630548的博客
08-26 993
<style> #mask { height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; display: none; } ..
JS弹窗操作，点击遮罩层关闭弹窗
lsx19981201的博客
03-07 4981
&lt;!-- 打开弹窗按钮 --&gt; &lt;button id="myBtn"&gt;打开弹窗&lt;/button&gt; &lt;!-- 弹窗 --&gt; &lt;div id="myModal" class="modal"&gt; &lt;!-- 弹窗内容 --&gt; &lt;div class="moda
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值