Search code examples
jquerymodal-dialogclickable

Conceptually how do you disable all OTHER page elements for modal window using JQuery?

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.

Solution

  • 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.