弹框时背景变暗特效

最新推荐文章于 2023-12-29 15:56:59 发布

w_t_y_y

最新推荐文章于 2023-12-29 15:56:59 发布

阅读量1.7k

点赞数 1

分类专栏： # HTML+css

本文链接：https://blog.youkuaiyun.com/w_t_y_y/article/details/79567191

版权

HTML+css 专栏收录该内容

14 篇文章

订阅专栏

<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	
		<title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</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)" οnclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">
			点击这里打开窗口</a>
		<div id="light" class="white_content">
			<a href="javascript:void(0)" οnclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
				关闭</a>
			<br>窗口内容
		</div>
		<div id="fade" class="black_overlay"></div>
	</body>

</html>