CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Tahola
Tahola

Reputation: 1015

Detect backdrop click on Bootstrap 3 modal

When using Twitter Bootstrap 3, Is there anyway to know when the modal is closed by a backdrop click ?

Upvotes: 11

Views: 12480

Answers (5)

Kaue Sedrez
Kaue Sedrez

Reputation: 55

$('.modal').modal({
    backdrop: 'static',
    keyboard: false
});

$(document).keyup(function(e) {
    if (e.which == 27 && $('body').hasClass('modal-open')) {
        console.log("esc");
    }
})
$(document).click(function(e) {

    if ($(e.target).hasClass("in") && $('body').hasClass('modal-open')) {
        console.log("backdrop click");
    }

})

Upvotes: 0

Partharaj Deb
Partharaj Deb

Reputation: 904

The easiest and and functional way in every case-

$(document).click(function (e) {
    setTimeout(function(){
        if (!$('body').hasClass('modal-open')) {
            $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
        }
    },1000);
});

Upvotes: 2

rmd
rmd

Reputation: 11

$(document).click(function (e) {
  if($(e.target).hasClass('modal-backdrop')){
    console.log("you clicked the backdrop!");
  }

Upvotes: 0

Irvin Dominin
Irvin Dominin

Reputation: 30993

I can't find any built in function to check what you want.

The only "hacky" way I found is to check the click/keyup event of the document and if the modal is opened call your callback.

Code:

$(document).keyup(function (e) {
    if (e.which == 27 && $('body').hasClass('modal-open')) {
        console.log('esc')
    }
})

$(document).click(function (e) {
    if (e.target === $('.modal-scrollable')[0] && $('body').hasClass('modal-open')) {
        console.log('click')
    }
})

Demo: http://jsfiddle.net/IrvinDominin/7nnUq/

Upvotes: 10

Tom Naessens
Tom Naessens

Reputation: 1837

The only events you can hook into, according to http://getbootstrap.com/javascript/#modals are show, shown, hide and hidden. There seems to be no distinction made from a normal-hide acction and a backdrop-hide action.

Upvotes: 3

Related Questions