Question

使用Twitter Bootstrap 3时，无论如何都要知道模式何时被背景点击关闭？

Answer 1

我找不到任何内置功能来检查你想要的东西。

我找到的唯一“hacky”方式是检查文档的click / keyup事件，如果模态打开，请调用回调。

代码：

$(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')
    }
})

演示：http://jsfiddle.net/IrvinDominin/7nnUq/

Answer 2

根据http://getbootstrap.com/javascript/#modals，您可以加入的唯一事件是show，shown，hide和hidden。似乎没有区别于正常隐藏动作和背景隐藏动作。

Answer 3

每种情况下最简单，最实用的方式 -

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

Answer 4

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

Answer 5

$('.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");
    }

})

检测背景点击Bootstrap 3模态

5 个答案: