Question

I have a help popup that I want to close when somewhere else is clicked. Here’s what I have:

$('.help[data-info]').click(function(){
  $('.info[a complicated selector]').toggle(400);
  $('*:not(.info[the complicated selector]).one('click','',function(){
    .info[the complicated selector].hide(400);
  });
})

But one() isn’t what I want before it fires for each element on the page. I only want it to fire once.

Answer 1

It looks like you are attaching event handlers to every element in your dom except the help popup? Hmm…

How about this:

Create a single “mask” div that overlays the entire screen, but is transparent (opacity: 0.0). Attach the click event handler only to that mask div. Then open up the info div on top of the overlay div. Clicking anywhere on the page, other than the info div, the event will be captured by the mask div before it gets to anything under it. In your event handler, hide() the info div, and remove the mask div altogether. While testing/experimenting with this, start with a partially opaque mask, not fully transparent).