I have the following div:

<div id="wele-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 (.stopPropagation/)

$(document).click(function(){
  $('#wele-lightbox').hide();
  $('#wele-lightbox-box').click(function(event){
    event.stopPropagation();
  });
});

However, this approach does not seem to work; the div still hides when clicked. Any ideas?

I have the following div:

<div id="wele-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./event.stopPropagation/)

$(document).click(function(){
  $('#wele-lightbox').hide();
  $('#wele-lightbox-box').click(function(event){
    event.stopPropagation();
  });
});

However, this approach does not seem to work; the div still hides when clicked. Any ideas?

• javascript
• jquery
• html
• css

• What I usually do is creating another element as an overlay. And since the lightbox has a higher value of z-index - clicking the overlay means clicking outside the lightbox. – Ofir Baruch Commented Dec 6, 2013 at 17:08
• 1 What is #wele-lightbox-box, surely you just want to register the event against #wele-lightbox? – musefan Commented Dec 6, 2013 at 17:09
• Can you post your HTML. Maybe a jsFiddle too? – j08691 Commented Dec 6, 2013 at 17:09
• @OfirBaruch . If you use like that when you click on any links directly , it wont work, first the mask click will happen after that you have to click it again , End user will think why he has to click 2 times – gauti Commented Jul 27, 2015 at 10:59

5 Answers 5

That is because you are registering the event only after the first click on the document and it gets hidden. So move your stop propagation event registration for the specific element outside of the document's click handler.

Try:

$(document).click(function(){
  $('#wele-lightbox').hide();

});
$(function(){
  $('#wele-lightbox').click(function(event){ //Also your selector may be wrong?
    event.stopPropagation();
  });
});

Demo

Or you could just do:

$(document).click(function(e){
    if(e.target.id !== 'wele-lightbox' )
        $('#wele-lightbox').hide();
});

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('#wele-lightbox').length )
        $('#wele-lightbox').hide();
});

checking the event.target ID would close the lightbox if any element inside the lightbox, other than the lightbox itself, was clicked.

Attach an event handler above the element and then check the target to see if the div was clicked.

$(document).click(function(e){
    var divId = "wele-lightbox";
    if(e.target.id != divId){
        $("#" + divId).hide();
    }
});

JS Fiddle: http://jsfiddle/rG3AC/

<div id="wele-lightbox"></div>

var lightbox = document.querySelector('#wele-lightbox');

document.addEventListener('click',function(e) {
  if(e.id != lightbox.id) {
    lightbox.style.visibility = 'hidden';
  }
},false);

You could do this by making it a 2 layer application, the outer div which spans the entire screen, like an overlay, then your inner div. Have a click event on the inner div which stops the event propogation, but then an a click event on the outer div which closes, or hides, itself.