遮罩层点击空余部分隐藏

最新推荐文章于 2024-04-09 14:32:59 发布
最新推荐文章于 2024-04-09 14:32:59 发布
阅读量533 收藏
点赞数
分类专栏： H5 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43993766/article/details/103924676
版权

工作中经常会有很多显示隐藏，点击x号就隐藏遮罩层。（实现点击空余部分也可以点击隐藏）
在这里插入图片描述如图为例：1.给遮罩设置点击就隐藏,
2.给这招内容区域设置
用event.preventDefault()，取消事件的默认动作。
用event.stopPropagation()停止事件的传播。

在这里插入图片描述js
在这里插入图片描述

A角
关注
专栏目录
点击遮罩层没有内容的地方进行隐藏
liuian1946的博客
03-13 6293
在项目中遇到的问题，因为是手机端的遮罩层，为了给用户更好的体验，需要在遮罩层中点击没有内容的地方讲遮罩层进行隐藏 这个主要用的知识点是事件的冒泡和捕获 事件的冒泡：是从里向外，DOM的层次像冒泡一样，不断的向上一级上升 事件的捕获：是从外向里 注意：1.ie只有事件的冒泡没有事件的捕获      2，事件的捕获会先发生 例子： .popup
点击遮罩层内容区域以外的区域，关闭遮罩层
空&白的博客
07-22 1909
html <div class="div1"> <dl class="div2"> 内容... </dl> </div> css .div1{ position: fixed; height: 100%; width: 100%; background: rgba(0,0,0,0.3); z-index: ...
点击遮罩层内容以外的区域关闭遮罩层
于离别之朝束起约定之花的博客
09-24 2066
最近的一个项目，设计稿上有个地方是弹出层，但是没有看见关闭按钮或者关闭图片，这让我很疑惑，这要怎么关闭？用户体验不会变差么？但想了想无所谓了，大不了以后再改，加个按钮或者图片点击隐藏而已，于是我就按着设计稿上的做了，今天特地分享出来（默认样式因为是单独一个css文件，太长，就用 * 强制清除默认样式了，但是推荐不这样用，至于为什么可以百度）。 接下来贴代码，首先是css的： * { ...
前端——点击遮罩层没有内容的地方进行隐藏
weixin_34290000的博客
02-27 745
在项目中遇到的问题，在PC端或手机端的遮罩层，为了给用户更好的体验，需要在点击遮罩层中弹窗隐藏，点击内容弹窗不能隐藏。这个主要用的知识点是事件的冒泡和捕获事件的冒泡：是从里向外，DOM的层次像冒泡一样，不断的向上一级上升事件的捕获：事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件注意：1.ie只有事件的冒泡没有事件的捕获 2，事件的捕获会先发生先了解一下...
javascript--6点击空白处隐藏>>以遮罩层为例
w3cgirl-赵娜的播客
03-01 764
点击空白处隐藏                                                        ------ 以遮罩层为例 一、效果： 一个盒子，点击除了自己以外的任何一个地方，就会隐藏。 1.点击注册，显示遮罩层 和 登陆界面，滚动条消失 2.点击空白区域，隐藏遮罩和登陆界面 3.点击登陆界面，界面不动 二、body +css 三、
php 自动等比例缩放图片 空余部分留空
04-17
6. **处理空余部分**：如果目标尺寸小于原图，那么缩放后的图片周围可能会有空余部分。这时，我们可以选择背景填充或者留空。若选择留空，只需保留图片本身，其余部分不处理。 7. **保存图片**：使用`imagejpeg()`...
leetcode603. 连续空余座位（SQL)
12-15
几个朋友来到电影院的售票处，准备预约连续空余座位。 你能利用表 cinema ，帮他们写一个查询语句，获取所有空余座位，并将它们按照 seat_id 排序后返回吗？ | seat_id | free | |———|——| | 1 | 1 | | 2 | 0 ...
基于红外避障模块和ARM+Cortex-M3的空余车位管理及引导系统-论文
05-10
系统主要由以下几个部分组成： - 车位状态采集：使用红外模块采集车位的占用情况，实时更新车位状态信息。 - 数据分块汇总：利用89C51单片机对各个车位的红外传感器数据进行汇总。 - 无线模块传输：通过NRF24L01...
【目标检测数据集】停车场车位空余停满检测数据集16580张2类VOC+YOLO格式.zip
最新发布
09-15
数据集格式：Pascal VOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：16583 标注数量(xml文件个数)：16583 标注数量(txt文件个数)：...
空余IP地址搜索工具.zip
07-10
本文将详细介绍"空余IP地址搜索工具"及其在IP地址管理中的应用。 首先，IP地址（Internet Protocol Address）是互联网上的设备唯一标识，它是一个32位或128位的数字地址，通常以点分十进制的形式表示，例如192.168....
js 页面全部遮罩层
07-21
js遮罩全部页面，包括鼠标滚动，和上下键的控制，引用jquery编写，调用时需依赖jquery，
vue实现点击div区域外隐藏div区域（盒子聚焦和失焦问题）
qq_34169240的博客
04-09 332
给遮罩层设定展示条件，当盒子处于显示时，遮罩层也一起显示，z-index大于body小于盒子即可，点击遮罩层即可触发隐藏事件。
js点击遮罩层内容以外的地方隐藏遮罩
肖肖肖丽珠的博客
05-22 399
combatBoxc内容区域 combatBox整个遮罩层最外面的div <div class="combatBox" style="display: block;"> <div class="combatBoxct"> <p class="allCombat"><i class="fontcolor">总战斗值:</i><i class="fontcolor" data-...
小程序点击遮罩层隐藏点击内容不隐藏
weixin_43789753的博客
05-29 1643
遮罩层会出现当想点击遮罩的暗处时隐藏,可是点击内容也会隐藏,只要在最外层添加标识就可以区分遮罩层和弹出的内容了. //data-ref='self'重点 <view wx:if="{{show}}" class="classType" data-ref='self' bindtap="hide"> <view class="cont">弹出的内容</view> </view> //点击遮罩层后面空白处隐藏 hide:function(e){
css遮罩--点击非弹出层隐藏弹出层
躺着写代码的博客
07-03 4328
        初看这个标题有点绕口，其实意思就是说，当在页面上点击一个按钮时，弹出一个弹出层，然后如果想关闭这个弹出层怎么办呢，一是可以点击弹出层容器包含的一个关闭按钮，另外一个就是点击遮罩层。        来张图来说明吧：                其实这种需求在移动端是很常见的，那么如何来实现呢，最重要的一点就是css的一个属性：z-index，当z-index越高，则表示越处于表层，...
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Elvis技术小屋
02-21 3179
本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法。分享给大家供大家参考，具体如下： 为了更好的用户体验，在做下拉获取其他有弹出层的时候，当展开下拉时，要做到点击其他区域也能自动隐藏收起下拉和遮罩层，这样的效果用一段js就可以了。 以下图为例的一个下拉菜单为参考： 效果实现源码： ? 1 2 3 4 5 6 7 8 9
php点击遮罩层遮罩层消失,前端——点击遮罩层没有内容的地方进行隐藏
weixin_34867823的博客
03-13 265
在项目中遇到的问题，在PC端或手机端的遮罩层，为了给用户更好的体验，需要在点击遮罩层中弹窗隐藏，点击内容弹窗不能隐藏。这个主要用的知识点是事件的冒泡和捕获事件的冒泡：是从里向外，DOM的层次像冒泡一样，不断的向上一级上升事件的捕获：事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件注意：1.ie只有事件的冒泡没有事件的捕获2，事件的捕获会先发生先了解一下实践冒泡和捕获事件...
使用css实现遮罩层 jquery实现点击任意位置关闭遮罩
yangruini_love的博客
06-29 1095
首先先看看完整的html，css可以根据实际情况进行更改。使用了一个鼠标悬停效果，默认颜色透明度为0.3，当鼠标移上去后，透明度为1。 接下来介绍的是俩种方式关闭遮罩方法一：点击×关闭遮罩 方法二：点击任意位置关闭遮罩.........
实现下拉列表，点击其他位置自动隐藏效果的三种方式比较
热门推荐
lm278858445的专栏
11-28 1万+
实现效果：1.点击按钮展开下拉列表 2.点击下拉列表中的选项进行选择，随后收起下拉列表 3.点击除下拉列表外的位置（包括按钮），收起下拉列表效果图如下所示： 完整代码请查看： https://github.com/wolf-wolf/pullDownList.git实现环境1.angular 2.sublime基本结构：组件的基本HTML结构如下所示：<!-- 外部包裹层 --> <div
ESXi 删除空余磁盘
07-28
4. 在“摘要”选项卡上，找到并选择“存储”部分。 5. 在存储列表中，找到要删除的空余磁盘。 6. 右键单击该磁盘，并选择“删除数据存储”选项。 7. 在确认对话框中，点击“是”以确认删除操作。 请注意，删除空余...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值