CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Neo
Neo

Reputation: 407

Getting overlay and div to properly fade when clicking outside of div?

My fiddle: http://jsfiddle.net/neowot/e786hLnL/

The goal: Overlay and SignUpScreen fade together when you click anywhere outside of SignUpScreen.

The current problem: Overlay and SignUpScreen are fading when you click inside SignUpScreen.

Also, Overlay is appearing over SignUpScreen despite the z-indexes set to attempt preventing this.

Where am I going wrong?

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


 });

Upvotes: 1

Views: 488

Answers (1)

zgood
zgood

Reputation: 12581

Your z-index's are backwards (your overlay has 2 and SignUpScreen has 1, highest number is the one on top) and SignUpScreen needs a position value like relative in order for z-index to work.

See this fiddle.

Upvotes: 2

Related Questions