我有一个简单的覆盖联系人框,它使用 CSS 和 Jquery 来工作。
实际的盒子就像我想要的那样掉落下来。但是包含透明黑色背景的 div 没有显示,我不知道为什么。
这可能是一些我没有注意到的简单事情。这是我的代码
HTML
<div class="overlay" id="overlay"></div>
<div class="box" id="box">
<a class="boxclose" id="boxclose"></a>
<h2>Get in touch</h2>
<p>
Talk to me
</p>
</div>
CSS
.overlay{
background-color:black;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
}
.box{
position:fixed;
top:-200px;
left:30%;
right:30%;
background-color:#fff;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
}
a.boxclose{
float:right;
width:26px;
height:26px;
background:url(../img/cancel.png)repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
最后,Jquery
<script>
$(function () {
$('#activator').click(function () {
$('#overlay').fadeIn('fast', function () {
$('#box').animate({ 'top': '160px' }, 500);
});
});
$('#boxclose').click(function () {
$('#box').animate({ 'top': '-200px' }, 500, function () {
$('#overlay').fadeOut('fast');
});
});
});
</script>
最佳答案
z-index
仅适用于定位元素。例如,给你的覆盖层一个绝对位置。但是,您会注意到,当您这样做时,您遇到了一个新问题,因此将其设置为最初使用 display:none
隐藏。
.overlay {
background-color:black;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
position:absolute;
display:none;
}
<强> jsFiddle example
关于jquery 覆盖不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25125984/