The background darkening effect when the frame pops up

<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	
		<title>Web page effects - window effects - the effect of darkening the background of the web page after the pop-up window</title>
		<meta http-equiv="content-Type" content="text/html;charset=gb2312">
		
		<style type="text/css">
			.black_overlay {
				display: none;
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: black;
				z-index: 1001;
				-moz-opacity: 0.8;
				opacity: .80;
				filter: alpha(opacity=80);
			}
			
			.white_content {
				display: none;
				position: absolute;
				top: 25%;
				left: 25%;
				width: 50%;
				height: 50%;
				padding: 16px;
				border: 3px solid orange;
				background-color: white;
				z-index: 1002;
				overflow: auto;
			}
		</style>
	</head>

	<body>
		
		<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">
			Click here to open the window</a>
		<div id="light" class="white_content">
			<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
				Close</a>
			<br>Window Contents
		</div>
		<div id="fade" class="black_overlay"></div>
	</body>

</html>

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325570961&siteId=291194637