js 点击页面其他地方关闭弹出层_自己做的弹窗页面如何点击其他元素关闭js-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44523717/article/details/96865712

本文介绍了一个简单的网页示例，通过JavaScript实现点击页面空白区域来关闭弹出层的功能。该示例包括HTML结构、CSS样式及JavaScript交互代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击除本身以外的地方关闭弹出层

//html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>
	<div class="nav">
		<a href="javascript:void(0)" onClick="showBox()">点我</a>
	</div>
	<div class="event" id="login_box" style="display: none;">
		<div class="login">
			<div class="title">
				<span class="del" onClick="deleteLogin()">X</span>
			</div>
			
			<form action="" method="post" name="myform">
				<input type="text" name="userqiye" id="txtname" value="" placeholder="企业名称"  />
				<span id="span_qiye"></span>
				<input type="text" name="username" id="txtnamea" value="" placeholder="姓名"  />
				<span id="span_name"></span>
				<input type="text" name="useriPhone" id="txt-ipone" value="" placeholder="电话"  />
				<span id="span_ipone"></span>
				<input type="text" name="useremail" id="txtemail" value="" placeholder="邮箱"  />
				<span id="span_email"></span>

				<textarea id="txt1"></textarea>
				<input type="button" name="" id="btn" value="提交" class="btn" />
			</form>


		</div>
	</div>
	<!-- 遮罩层 -->
	<div class="bg_color" onClick="deleteLogin()" id="bg_filter" style="display: none;"></div>

	<script>

		function deleteLogin() {
			var del = document.getElementById("login_box");
			var bg_filter = document.getElementById("bg_filter");
			bg_filter.style.display = "none";
			del.style.display = "none";
		}
		function showBox() {
			var show = document.getElementById("login_box");
			var bg_filter = document.getElementById("bg_filter");
			show.style.display = "block";
			bg_filter.style.display = "block";

		}

	</script>
</body>

</html>


.event{
	position: absolute;
	top: 40%;
	left: 40%;
	margin: -250px 0 0 -200px;
	z-index: 9999;
	background-color:pink;
}


.title{
	float: left;
	width: 600px;
	height: 60px;
	line-height: 60px;
	
	position: relative;
}
.t_txt{
	float: left;
	margin-left: 20px;
	font-size: 16px;
	color: green;
	position: relative;
}

.del{
	float: right;
	margin-right: 20px;
	color: #000000;
	position: relative;
}
.del:hover{
	color: #000000;
	cursor: pointer;
}
.login input{
	display: block;

	width: 360px;
	height: 45px;
	line-height: 45px;
	margin-bottom: 20px;
	
	margin: 0 auto;
	
	color: #792120;
	border: 0; 
	background-color: #ececec;
	font-size: 18px;
	
	
}


.login .textae{
	height: 80px !important;
	line-height: 1px !important;

}
.login textarea{
	display:block;
	margin: 0 auto;
	/* text-align: center; */
	font-size: 18px;
	width:360px;
	height: 100px;
	overflow-y:visible;
	color: #792120;
	border: 0; 
	background-color: #ececec;
	/* margin-top: 10px; */
	
}

.login .btn{
	width: 100px !important;
	height: 50px;
	border-radius: 5px;
	background: #792120 !important;
	border: none;
	color: white !important;
	font-size: 16px;
	text-align: center;
	margin-top: 20px;
	
	
}


.nav{
	width: 100%;
	height: 35px;
	line-height: 35px;
}

.nav a{
	color: red;
}
.nav a:hover{
	color: green;
}
.bg_color{
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.4) !important;
	filter: alpha(opacity=40) !important;
	position: fixed !important;	
	top: 0;
	z-index: 99;
}
.text{
	text-align: center;
	padding-top: 20px;
	color: black;
	
	}
/* .img{
	margin: 40px auto;
	display: block;
} */
.back{
	text-align:center;
	padding-top: 20px;
	color: green;
	cursor: pointer;
}


.login-head{
	text-align: center;
}

 .showbox-txt{
	 text-align: center;
    font-size: 18px;
	padding-bottom: 30px;
	margin-top: 40px;
  }
   .showbox-txt span{
    padding-left: 30px;
}

#span_qiye{
	
	font-size: 15px;
	color: red;
	margin-left: 120px;
}

#span_name{

	font-size: 15px;
	color: red;
	margin-left: 120px;
}

#span_email{
	font-size: 15px;
	color: red;
	margin-left: 120px;
}


#span_ipone{
	font-size: 15px;
	color: red;
	margin-left: 120px;
}