半透明遮蔽层div

最新推荐文章于 2019-02-27 21:50:51 发布

zzc1684

最新推荐文章于 2019-02-27 21:50:51 发布

阅读量177

点赞数

分类专栏： Html css 文章标签：半透明遮蔽层div

本文链接：https://blog.csdn.net/zzc1684/article/details/84804592

版权

Html 同时被 2 个专栏收录

46 篇文章 0 订阅

订阅专栏

css

32 篇文章 0 订阅

订阅专栏

<html>
	<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<title>半透明遮蔽层div</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport">
	
	<link rel="stylesheet" type="text/css" href="animations.css">
	<script src="jquery-1.7.1.js" type="text/javascript" ></script>
	
	<style>
		* {
			padding: 0px;
			margin: 0px;
		}
		.shade {
			background-color:#000; opacity:0.8; filter:alpha(opacity=80);
		    z-index: 8888;
		    height: 100%;
		    left: 0;
		    top: 0;
		    width: 100%;
		    position: fixed;
		}
		.city-wrapper {
			width: 80%;
			position: absolute;
			z-index: 8888;
			height: 300px;
			background-color: #ffffff;
			margin-top: 200px;
			margin-left: 10%;
		}
		.city-list {
			list-style: none;
		}
		.city-list li {
			width: 100%;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border-bottom: 1px solid #eeeeee;
		}
	</style>
	</head>
	<body>
		
		<input id="show" type="button" value="点击" />
		
		<div class="shade"></div>
		<div class="city-wrapper pt-page-moveCircle">
			<ul class="city-list">
				<li value="1">测试</li>
				<li value="2">测试</li>
				<li value="3">测试</li>
				<li value="4">测试</li>
				<li value="5">测试</li>
				<li value="6">测试</li>
			</ul>
		</div>
			
	
	<script type="text/javascript">
		$(function() {
			
			$("#show").click(function() {
				$(".shade").show();
				$(".city-wrapper").show();
			});
			$(".shade, .city-wrapper").click(function() {
				$(".shade").hide();
				$(".city-wrapper").hide();
			});
			
			$(".city-list li").click(function() {
				alert($(this).val());
			});
			
			
		});
	</script>
	</body>
</html>

zzc1684

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
半透明遮蔽层div

&lt;html&gt; &lt;head&gt; &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type"&gt; &lt;title&gt;半透明遮蔽层div&lt;/title&gt; &lt;meta content="width=device-width, ini
复制链接

扫一扫

专栏目录