您的位置：首页 > Web前端 > JavaScript

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

2016-12-30 15:46 225 查看

<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; 来个事件

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航