html的css+js带有关闭关闭按钮的弹窗



点击此处查看实例
源码如下:



<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<style>
	.zhezhao {
		position: fixed;
		left: 0px;
		top: 0px;
		background: rgba(173, 173, 173, 0.514);
		width: 100%;
		height: 100%;
	}

	.tankuang {
		position: relative;
		background: rgb(255, 255, 255);
		width: 90%;
		height: 80%;
		border-radius: 5px;
		margin: 5% auto;
	}

	#header {
		height: 40px;
	}

	#header-right {
		position: absolute;
		width: 25px;
		height: 25px;
		border-radius: 5px;
		background: red;
		color: #fff;
		right: 5px;
		top: 5px;
		text-align: center;
	}
	</style>
</head>
<body>
	<button type="button" onclick="dianwo()">打开弹窗</button>
	<div class="zhezhao" id='zhezhao'>
		<div class="tankuang">
			<div id="header">
				<h3>HelloWorld<br>welcome to visit my site</h3>
				<div id="header-right" onclick="hidder()">
					<button onclick="pauseVid()" type="button" style="background-color: red;">
						<a href="javascript:void()" style="color: white;" title="关闭">X</a>
					</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	document.getElementById('zhezhao').style.display = "none";
	function dianwo() {
		document.getElementById('zhezhao').style.display = "";
	}
	function hidder() {
		document.getElementById('zhezhao').style.display = "none";
	}
</script>
</html>


		



这个弹窗分为三部分:
1.整个窗口的背景
2.弹窗整体
3.弹窗的头部(关闭弹窗按钮的一行)

我们具体说一下这段代码的原理
首先当打开网页时要将弹窗隐藏起来,如果你点击了打开弹窗的按钮,那么就取消隐藏,将弹窗显示出来。如果你点击了关闭弹窗,那么就再次将弹窗隐藏起来。用JS则可以实现这个效果

我们再来看一下上面代码中的JS

<script type="text/javascript">
	document.getElementById('zhezhao').style.display = "none";
	function dianwo() {
		document.getElementById('zhezhao').style.display = "";
	}
	function hidder() {
		document.getElementById('zhezhao').style.display = "none";
	}
</script>



第二行document.getElementById('zhezhao').style.display = "none";在打开网页时自动将名称为"zhezhao"的弹窗整体隐藏起来,也就是将display设为none即可达到不显示弹窗的效果



然后再来看第3-5行,定义了dianwo(),这个的作用是用来打开弹窗
里面的document.getElementById('zhezhao').style.display = "";取消了display="none",将display设为默认



6-8行则定义了hidder(),这个用来关闭弹窗,将display再次设为none



总而言之,用style.display = ""来实现隐藏和显示弹窗,达到开启、关闭弹窗的效果.