浅谈利用遮罩实现点击某区域以外时弹窗的弹出与关闭

野性酷女 2022-09-29 04:21 191阅读 0赞

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";
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关点击弹出弹窗公告js源代码实例

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

太过爱你忘了你带给我的痛/ 2023年01月18日 09:21/ 0 赞/ 5 阅读

相关点击空白区域关闭弹窗

private GraphicRaycaster RaycastInCanvas; private EventSystem eventSystem;

绝地灬酷狼/ 2022年12月30日 14:56/ 0 赞/ 239 阅读

相关 js点击遮罩层内容以外的地方隐藏遮罩

combatBoxc内容区域 combatBox整个遮罩层最外面的div > <div class="combatBox" style="display: bl

ゞ浴缸里的玫瑰/ 2022年10月14日 15:57/ 0 赞/ 266 阅读

相关浅谈利用遮罩实现点击某区域以外时弹窗的弹出与关闭

HTML： <div id="div">点击除开div的区域可以弹出弹窗</div> <div id="cover"></div> <div id="

野性酷女/ 2022年09月29日 04:21/ 0 赞/ 192 阅读

相关网页：单击按钮弹出悬浮窗+页面遮罩

<html> <head lang="en"> <head> <meta charset="UTF-

╰半橙微兮°/ 2022年09月03日 15:25/ 0 赞/ 226 阅读

相关点击蒙版遮罩关闭弹窗

![在这里插入图片描述][9e998efa8a654190b92a54d9c7af83fe.png] [9e998efa8a654190b92a54d9c7af83fe.p

太过爱你忘了你带给我的痛/ 2022年08月29日 00:00/ 0 赞/ 217 阅读

相关 js遮罩层弹出框

昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了一定指出呀 <s

待我称王封你为后i/ 2022年08月06日 11:03/ 0 赞/ 309 阅读

相关 JavaScript点击弹出遮罩层

JavaScript点击弹出遮罩层开发工具与关键技术：DW与JS 作者：戴怡斌撰写时间：2019年1月18日下面我

小咪咪/ 2022年03月25日 05:51/ 0 赞/ 491 阅读

相关弹出框的遮罩层

css样式： .shade { // 遮罩层的实现方法 position: fixed; top: 0;

末蓝、/ 2022年02月24日 12:16/ 0 赞/ 421 阅读

相关点击遮罩层内容区域以外的区域，关闭遮罩层

html <div class="div1"> <dl class="div2"> 内容... </dl> </div> c

﹏ヽ暗。殇╰゛Y/ 2021年11月29日 16:36/ 0 赞/ 540 阅读