javascript - 在div外部单击时，是否使叠加层和div正确消失？

我的小提琴：http://jsfiddle.net/neowot/e786hLnL/

目标：单击SignUpScreen以外的任何位置时，Overlay和SignUpScreen一起消失。

当前的问题：在SignUpScreen内部单击时，Overlay和SignUpScreen逐渐消失。

此外，尽管将z-index设置为尝试阻止覆盖，但OverSign仍显示在SignUpScreen上。

我要去哪里错了？

的HTML

<body>
    <div id="overlay"></div>
    <div id="SignUpLink">Sign Up</div>
    <div id="SignUpScreen">You're signing up!</div>
</body>

的CSS

#SignUpLink{
    background:green;
    width:300px;
    height:300px;
}

#SignUpScreen{
    background:blue;
    width:600px;
    height:600px;
    display:none;
    z-index:1;
    color:white;
}

#overlay{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color: rgba(0, 0, 0, .50);
    display:none;
    z-index:2;
}

$(function() {
    var container = $('#SignUpScreen');


    $(document).mouseup(function (e) {

        if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            container.fadeOut(450);
            $('#overlay').fadeOut(450);
        }


    });


    $('#SignUpLink').click(function() {
        $('#SignUpScreen').fadeIn(450);
        $('#overlay').fadeIn(450);
    });


 });

最佳答案

您的z-index值是向后的（您的overlay有2个，而SignUpScreen有1个，最大的是最上面的一个），并且SignUpScreen需要像position这样的relative值才能使z-index工作。

参见此fiddle。