11

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

5 Answers 5

10

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/

0
3

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.

2

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);
});
0
$(document).click(function (e) {
  if($(e.target).hasClass('modal-backdrop')){
    console.log("you clicked the backdrop!");
  }
0
$('.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");
    }

})
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.