0

If I write a custom JQuery modal window or "light box," what are the mechanics of disabling all the anchor tags and other clickable elements outside of the div?

Somehow do you capture all events and test to see if there is a hit inside the div rectangle and throw all others away?

I'm not interested in how to create an overlay that's dim or transparent. This question was asked earlier but the answers focused on overlaying not disabling elements.

Community
  • 1
  • 1
Pete Alvin
  • 4,646
  • 9
  • 39
  • 56

2 Answers2

0

The easiest way to do it, is indeed the overlay. The overlay captures all the clicks, covering the elements under it. If you dont want it to visible, just do it transparent.

Enrique Moreno Tent
  • 24,127
  • 34
  • 104
  • 189
0

To disable all links you would simply need to use code such as:

var modal = false;

$('body').delegate('a', 'click', function(){
    if(modal){
        return false;
    }
});

Then when you show your lightbox simply change modal = true.

Tom Walters
  • 15,366
  • 7
  • 57
  • 74
  • Will the lightbox still be able to receive clicks? Or do I have to do a div rectangle hit test? – Pete Alvin Dec 06 '11 at 17:49
  • 1
    Well if you have links in your lightbox you would either change "body" to only include page elements and not the lightbox - maybe a wrapper div, or change the "a" selector to "a:not(.lightbox a)" – Tom Walters Dec 06 '11 at 20:30