jquery 覆盖不工作

Question

Fiddle

我有一个简单的覆盖接触框，它使用 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>

Answer 1

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