点击遮罩层的背景关闭遮罩层（HTML）

在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层，但唯独点击内容区域不会关闭掉遮罩层。于是我开始模仿这个写案例，连内容也一模一样（因为这个练习就是要写出和华为关一样的效果或则比它更好的效果），一开始我是这样子写的（图1）

图1

class=Select_Region_bj 我给了一个灰色半透明的背景样式，后来在Javascript中写onclick事件无论这么写，点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩层，后来下课期间我看见我同学他写的带能点击内容区不会关闭遮罩层。我问他你是这么写的，他告诉我：“把他们分离就可以的了。”我思考了一会，脑补：分离？怎么分离？补着补着补着就补出了背景和内容区分离。分离写（图2）
图2

把背景层和内容区分开来写，不要在背景层中包裹内容，这样子点击内容区就不会关闭掉遮罩层了！

点击遮罩层的背景关闭遮罩层（HTML）相关推荐

点击遮罩层的背景关闭遮罩层
开发工具与关键技术:Adobe Dreamweaver CC 作者:黄灿撰写时间:2019.1.16 在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层, ...
vue自定义弹窗dialog，vue 点击遮罩层功能区以外的地方关闭遮罩层
vue自定义弹窗dialog,vue 点击遮罩层功能区以外的地方关闭遮罩层 1.示例展示 2.代码 <template><div class="content"& ...
vue 点击遮罩层功能区以外的地方关闭遮罩层
点击红色框外的遮罩层区域关闭遮罩层方法一: 关键点:@click="close($event)" ref="msk" <div v-if="p ...
if vue 跳出_vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展. v-if 是直接删除dom节点, 就是这 ...
js ajax 点击遮罩层,jQuery弹出遮罩层效果完整示例
本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ...
Element-UI 组件MessageBox 弹框关闭遮罩层
奇怪需求,Dialog不做body遮罩导致多一级的遮罩会显示异常,就把Dialog里的MessageBox的关闭,又不影响其他的使用,故关闭后需要打开,终于在官网看到并尝试成功了,分享出来 this. ...
一个遮罩层怎么遮罩两个图层_遮罩效果全解（13种方法）
初学者关于遮罩的话题问的较多,下面我将遮罩的一些常见问题进行一下归纳. 1.请问遮罩的原理是什么? 遮罩层好比黑夜中的一支手电筒,照在哪儿(指被遮罩层)哪儿就显现. 第一步:创建两个图层,命名,一个是 ...
html遮罩提示框代码,基于jQuery实现弹出可关闭遮罩提示框实例代码
jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果先给大家展示下效果图,如果大家感觉还不错,请参考实 ...
Qt 半透明背景（遮罩）
简述前些天从嵌入式Linux Qt4 切换到嵌入式Linux Qt5 开发平台,发现遮罩不能用了,原本半透明的背景变成了黑色,全网找遍资料,没有特别好的解决方案,无奈自己手撸撸一个,且测亲测好用. ...

点击遮罩层的背景关闭遮罩层（HTML）

点击遮罩层的背景关闭遮罩层（HTML）相关推荐

最新文章

热门文章