Question

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

目标：当您点击SignUpScreen之外的任何地方时，叠加和SignUpScreen会一起淡出。

当前问题：当您在SignUpScreen内部单击时，叠加和SignUpScreen会褪色。

此外，Overlay正在SignUpScreen上出现，尽管z-index设置为尝试阻止此操作。

我哪里错了？

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;
}

JS

$(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);
    });


 });

Answer 1

你的z-index是向后的（你的overlay有2而SignUpScreen有1，最高的数字是最高的那个）而SignUpScreen需要{{1}像position这样的值，以便z-index起作用。

请参阅此fiddle。

在div外部点击时，使叠加层和div正确淡出？

1 个答案: