javascript之模态框

最新推荐文章于 2024-05-23 21:59:51 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2024-05-23 21:59:51 发布

阅读量215

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/echokkk/article/details/78965589

版权

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

demo代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>motaikuang</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		html,body {
			height: 100%;
			width: 100%;
		}
		.box {
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.4);
			position: absolute;
			top: 0;
			left: 0;
			display: none;
		}
		.mask {
			width: 400px;
			height: 400px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -200px;
			margin-left: -200px;
			background: #fff;
		}
		span {
			font-size: 30px;
			position: absolute;
			right: 10px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="mask">
			<span class="close">×</span>
		</div>
	</div>
	<a href="#">zhuce</a>
	<a href="#">denglu</a>
	<script type="text/javascript">
		var box = document.getElementsByClassName("box")[0];
		var mask = document.getElementsByClassName("mask")[0];
		var close = document.getElementsByClassName("close")[0];
		var a1 = document.getElementsByTagName("a")[0];
		var a2 = document.getElementsByTagName("a")[1];
		console.log(close)
		a1.onclick = function(){
			box.style.display = "block";
		};
		a2.onclick = function(){
			box.style.display = "block";
		};
		box.onclick = function(){
			// 阻止冒泡或者是捕获
			event.stopPropagation();
			box.style.display = "none";
		};
		close.onclick = function(){
			event.stopPropagation();
			box.style.display = "none";
		};
		mask.onclick = function(){
			event.stopPropagation();
			box.style.display = "block";
		};	
	</script>
</body>
</html>