Question

I’m working on a jQuery light box. It works great, but I’d like to add another feature: I’d like the box to close when the surrounding, “dimmer”, div is clicked, but not when the main one is.

To clarify, I have two divs: div A and div B. Div A has a semi-transparent background image, and covers the entire screen (it is absolutely positioned). Div B is smaller, and inside of div A (also absolutely positioned) and has the main content of the light box. Is it possible to attach a click event to div A (outer) that does not fire if div B (the inner one) is clicked?

Thanks!

Answer 1

The best way to achieve that is…

$('#your-light-box').click(function(event) {
   event.stopPropagation();
});

$(document).click(function() {
  closeLightbox();
});