开源达人白话版 css+js 弹窗的 原理与解析。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			#fdiv {
				display: none; /* 默认隐藏 */
				position: fixed; 
				z-index: 1; 
				padding-top: 100px; 
				left: 0;
				top: 0;
				width: 100%; 
				height: 100%; 
				overflow: auto; 
				background-color: rgb(0,0,0); 
				background-color: rgba(0,0,0,0.4);
			}
			
			span  {
				background-color: #2D6A88;
				height: 100px;
				width: 800px;
				display: block;
				
			}
			
			#fdiv-2 {
				margin-top: 180px;
			}
			
			#fdiv-gb {
				position: absolute;
				top: 3px;
				left: 760px;
				float: right;
			}
		</style>
		
		<button type="button" id="bt">打开弹窗</button>
		
		<div id="fdiv">
			<span id="fdiv-1">页头</span>
			<div id="fdiv-gb">
				关闭
			</div>
				<div id="zdiv">
					页中
				</div>
			<span id="fdiv-2">页尾</span>	
		</div>
	
		<script>
		//点按钮打开弹窗
		//点关闭关闭弹窗
		
			var bt = document.getElementById('bt');
			var wd = document.getElementById('fdiv');
			var gb = document.getElementById('fdiv-gb');
			
			bt.onclick=function(){
				wd.style.display='block';
			}
			
			gb.onclick=function(){
				wd.style.display='none';
			}
			
			
		</script>
	</body>
</html>

发表评论