Z-index属性和弹框打开和关闭

最新推荐文章于 2022-10-23 10:53:16 发布

hnczlzj

最新推荐文章于 2022-10-23 10:53:16 发布

阅读量820

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/hnczlzj/article/details/53943949

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<style type="text/css">

	#abc{
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
	    top: 0; 
		left: 0;
		z-index: 99;
		display: none;
	}
	#first{
		height: 400px;
		width: 400px;
		background: #fff;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}
	#first #close{
		float: right;
		font-weight: bold;
		cursor: pointer;
		margin-right: 20px;
		
	}
	#first .second{
		border-top: 1 solid gray;
		text-align: center;
	}
	
</style>

<script type="text/javascript">
	$(document).ready(function(){
		$(".tanchu").click(function(){
			$("#abc").toggle("fast").css({
			'top':(heigth)+'px',
			'left':(width)+'px'
				});
		});
		 $("#close").click(function(){
				$("#abc").hide();
				
				}); 
	});
	//设置弹出框 和滚动条一起滚动
	$(window).scroll( function() {
	var height=$(this).scrollTop(); //获得滚动条距窗口顶部的高度
	$("#abc").css('margin-top',(height));
	});
	
</script>
</head>
<body>
		<input type="button" value="弹出" class="tanchu">
		<div id="abc">		
				<div id="first">					
						<p class="title">请选择<span id="close" >X</span></p>
						
						
					<div class="second">
						<option>山东</option>
						<option>广东</option>
						<option>湖南</option>
					</div>					
				</div>
		</div>	
		<div class="bcd">
			<span><a href="">我要收藏</a></span>
		</div>	
</body>
</html>

Z-index属性：值越大覆盖值越小的

打开：点弹出按钮，触发事件，对前端样式进行控制

关闭：将X 变为cursor: pointer; 来个事件

hnczlzj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Z-index属性和弹框打开和关闭

Insert title here #abc{ height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.4); position: fixed; top: 0; left: 0; z-index: 99; display: none; } #first{ height: 400
复制链接

扫一扫