Check if click occured inside or outside of modal window

Question

I am catching click on website and closing modal window.

But how to actually check if click occured inside or outside of modal window?

    $(document).click(callself(this, function (inst, event) {
        var modalElement = $(selector);
        if (modalElement.css("display") == "block") {
            this.closeButtonClicked();
        }
    }));

http://api.jquery.com/event.target/ – Blazemonger Oct 14 '13 at 14:00 — Blazemonger, Oct 14 '13 at 14:00

score 2 · Accepted Answer · answered Oct 14 '13 at 14:02

2

lets say your modal window id is modal.

with jQuery:

$(function(){
    $(document).click(function(){
        console.log('document is clicked');
    });

    $('#modal').click(function(e){
        e.preventDefault();
        e.stopPropagation();
        console.log('modal is clicked');
    });
});

hope that helps.

answered Oct 14 '13 at 14:02

geevee

5,411
5
30
48

Cool, it's even better than CSS3 `pointer-events:none;` – Szymon Toda Oct 14 '13 at 15:57
1

and css3 isn't supported in some browsers. javascript approach is. – geevee Oct 14 '13 at 19:06
Is there a way to make it work on `position:absolute` elements? – Szymon Toda Oct 15 '13 at 05:23
well, yes- it should work on them ether. – geevee Oct 15 '13 at 05:24
Nope it's not. Relative elements are ok. – Szymon Toda Oct 15 '13 at 06:08

Check if click occured inside or outside of modal window

1 Answers1