javascript - Getting overlay and div to properly fade when clicking outside of div? -
my fiddle: http://jsfiddle.net/neowot/e786hlnl/
the goal: overlay , signupscreen fade when click anywhere outside of signupscreen.
the current problem: overlay , signupscreen fading when click inside signupscreen.
also, overlay appearing on signupscreen despite z-indexes set attempt preventing this.
where 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 target of click isn't container... && container.has(e.target).length === 0) // ... nor descendant of container { container.fadeout(450); $('#overlay').fadeout(450); } }); $('#signuplink').click(function() { $('#signupscreen').fadein(450); $('#overlay').fadein(450); }); });
your z-index's backwards (your overlay has 2 , signupscreen has 1, highest number 1 on top) , signupscreen needs position value relative in order z-index work.
see fiddle.
Comments
Post a Comment