将功能绑定到Twitter Bootstrap Modal Close

Question

我在一个新项目上使用Twitter Bootstrap lib，我想要部分页面刷新并检索模态关闭时的最新json数据。我没有在文档中的任何地方看到这一点，有人可以向我指出或建议解决方案。

使用记录的方法有两个问题

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

我已将“隐藏”类附加到模态，因此它不会在页面加载时显示，因此会加载两次

即使我删除了隐藏类并将元素ID设置为display:none并将console.log("THE MODAL CLOSED");添加到上面的函数中，当我点击时，没有任何反应。

Answer 1

Bootstrap 3＆amp; 4

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
})

Bootstrap 3：getbootstrap.com/javascript/#modals-events

Bootstrap 4：getbootstrap.com/docs/4.1/components/modal/#events

Bootstrap 2.3.2

$('#myModal').on('hidden', function () {
    // do something…
})

请参阅getbootstrap.com/2.3.2/javascript.html#modals→活动

Answer 2

Bootstrap 4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

请参阅此JSFiddle以获取一个工作示例：

http://jsfiddle.net/aq9Laaew/120440/

请参阅此处文档的模态事件部分：

https://getbootstrap.com/docs/4.1/components/modal/#events

Answer 3

启动 Bootstrap 3 （编辑：在 Bootstrap 4 中仍然相同），有2个实例可以启动事件， ：

1. 当模态“隐藏”事件开始时

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  

2. 当模态“隐藏”事件完成时

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

参考：http://getbootstrap.com/javascript/#js-events

Answer 4

您需要使用“on”事件，而不是“live”，而是将其分配给文档对象：

使用：

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

Answer 5

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

Answer 6

Bootstrap提供您可以挂钩modal的事件，就像您想要在模式完成对用户隐藏时触发event您可以使用隐藏.bs.modal 事件 像这样

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

在 fiddle here

中查看工作Documentation详细了解模态方法和事件

Answer 7

我已经看到很多关于引导事件的答案，例如hide.bs.modal，当模态关闭时会触发。

这些事件存在问题：模态中的任何弹出窗口（弹出窗口，工具提示等）都会触发该事件。

当模态关闭时，还有另一种方法来捕捉事件。

$(document).on('hidden','#modal:not(.in)', function(){} );

当模态打开时，Bootstrap使用in类。 使用hidden事件非常重要，因为在触发事件in时仍会定义类hide。

此解决方案在IE8中不起作用，因为IE8不支持Jquery :not()选择器。

Answer 8

我遇到与

相同的问题

$('#myModal').on('hidden.bs.modal', function () {
// do something… })

您需要将其放在页面底部，将其置于顶部，不会触发事件。

Answer 9

Bootstrap 4：

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

<强> hide.bs.modal ： 调用hide实例方法时会立即触发此事件。

<强> hidden.bs.modal ： 当模态完成对用户的隐藏时将触发此事件（将等待CSS转换完成）​​。

Answer 10

我在这里超级跳得很晚，但是对于使用Rest的Bootstrap模态的人我一直在使用MutationObserver来检测模态可见性的变化并相应地调整状态 - 当模态关闭时，此方法可用于运行任何函数：

//react stuff
componentDidMount: function() {
    var self = this;
    $(function() {
        $("#example_modal").addClass('modal');
        //use MutationObserver to detect visibility change
        //reset state if closed
        if (MutationObserver) {
        var observer = new MutationObserver(function(mutations) {
            //use jQuery to detect if element is visible
            if (!$('#example_modal').is(':visible')) {
                //reset your state
                self.setState({
                    thingone: '',
                    thingtwo: ''
                });
            }
        });
        var target = document.querySelector('#example_modal');
            observer.observe(target, {
                attributes: true
          });
        }
    });
}

对于那些对现代浏览器支持感到疑惑的人，CanIUse在around 87%

上有MutationObserver的报道

希望能帮助某人：）

干杯，

杰克

Answer 11

我会这样：

$request

其余的已经由其他人写了。我还建议您阅读文档：jquery - on method

Answer 12

如果要在每个模式关闭时触发函数，可以使用此方法，

$(document).ready(function (){
    $('.modal').each(function (){
        $(this).on('hidden.bs.modal', function () {
            //fires when evey popup close. Ex. resetModal();
        });
    });
});

因此您不需要每次都指定模式ID。

Answer 13

Bootstrap 5 和进一步#vanilla-based

回到根源伙计们。和其他人一样，bootstraps 新方法也是基于原生 javascript

var myModalEl = document.getElementById('myModalID');
myModalEl.addEventListener('hidden.bs.modal', function (event) {
    // do something...
});