I have the following div:
<div id="welcome-lightbox">
<div id="content"></div>
</div>
I want to hide the div when the user clicks anywhere BUT inside the div. I thought the most elegant way to do this would be stopPropagation (http://api.jquery.com/event.stopPropagation/)
$(document).click(function(){
$('#welcome-lightbox').hide();
$('#welcome-lightbox-box').click(function(event){
event.stopPropagation();
});
});
However, this approach does not seem to work; the div still hides when clicked. Any ideas?
Attach a click handler to the document, and check if the click originated from within the element by using closest() :
$(document).on('click', function(e){
if (! $(e.target).closest('#welcome-lightbox').length )
$('#welcome-lightbox').hide();
});
checking the event.target ID would close the lightbox if any element inside the lightbox, other than the lightbox itself, was clicked.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments