弹框时背景变暗特效_axure弹出窗口使背景变暗

作者：你好赵伟 | 2024-02-26 23:50:15

踩

axure弹出窗口使背景变暗


<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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/148384