关于jquery：将一个函数绑定到Twitter Bootstrap Modal Close


Bind a function to Twitter Bootstrap Modal Close

我正在一个新项目中使用Twitter引导程序库，我希望页面的一部分能够在模式关闭时刷新和检索最新的JSON数据。我在文档中的任何地方都看不到这一点，有人可以向我指出或建议解决方案。

使用文档化方法的两个问题

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

我已经在模式中附加了一个"hide"类，这样它就不会在页面加载时显示，从而可以加载两次

即使我删除了hide类并将element id设置为display:none，并在单击close时将console.log("THE MODAL CLOSED");添加到上面的函数中，也不会发生任何事情。

bootstrap 3与4

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

3、bootstrap getbootstrap.com / JavaScript / # modals -事件

4、bootstrap getbootstrap.com /文档/ 4.1 /元件/事件/ #模态

bootstrap 2.3.2

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

看到getbootstrap.com / 2.3.2 / javascript.html # modals ->事件

相关讨论

bootstrap 4

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

看到这jsfiddle，对于一个工作的例子：

http：/ / / / / 120440 jsfiddle.net aq9laaew

因为这里的文档部分模态事件：

HTTPS getbootstrap.com /文档/：/ / / / / # 4.1元件模态事件

相关讨论

开始bootstrap 3(编辑：仍然是相同的，在bootstrap 4)有两个情况下，你可以在其中是火起来的事件，是：

1。当模态"隐藏"事件开始

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

2。当模态完成"隐藏"事件

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

ref：http：/ / / / # js - getbootstrap.com JavaScript事件

相关讨论

在stead的"生活"，你需要使用"对"的事件，但它的面向对象assign文件：

使用：

1
2
3
$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
相关讨论

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

bootstrap提供的事件，你可以钩成模态，就像如果你想当大的火，一事件已被隐藏的模态完成从用户，你可以使用hidden.bs.modal事件 像这样的

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

检查一个工作fiddle在这里阅读更多关于模态方法和事件在打印文档

4、bootstrap

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

hide.bs.modal： 这一事件是当instance立即开的隐藏方法已被称为。

hidden.bs.modal： 这一事件是当开的模态被隐藏从已完成的用户(车道转换到完整的CSS等)。

相关讨论

我是有一些相同的问题作为与

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

你需要将这个页面底部的叶片，将永远不会在顶部的火灾事件。

相关讨论

我看到许多答案，其中的事件，如bootstrap hide.bs.modaltriggers当closes的模态。

那是一个问题与那些事件：在任何popups模态(popovers，tooltips，etc)，将触发的事件。

有另一种方式是当一个大的捕获的事件closes模态。

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

当使用的bootstrap in类模态是开放的。 这是非常重要的大事件的类使用的hidden自in仍然是由hideis定义的事件的时候。

这个解决方案将不工作在ie8自ie8并不jquery :not()selector不支持。

我跳跃在超级晚在这里，但为人使用bootstrap modals与反应我已经使用在一个大的变化mutationobserver detect模态的visibility和adjusting州accordingly -这种方法可以应用到任何函数当颤抖的模态是封闭的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//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
          });
        }
    });
}

为那些wondering关于现代浏览器的支持，caniuse mutationobserver覆盖之前已在各地的87%

你甚至不知道我的名字的希望：)

欢呼，

杰克

我会做它，像这样：

1
$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

其余的已经被写入由其他。我也recommend阅读的文档的方法：jquery -对