将一个函数绑定到Twitter引导模式关闭。

I am using the Twitter Bootstrap lib on a new project and I want for part of the page to refresh and retrieve the latest json data on modal close. I dont see this anywhere in the documentation can someone point it out to me or suggest a solution.

我在一个新项目上使用Twitter的Bootstrap库，我想让页面的一部分刷新和检索关于modal close的最新json数据。我在文档中没有看到有人向我指出这一点，或者提出一个解决方案。

Two problems with using the documented methods

使用文档化方法有两个问题。

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

I attach a "hide" class to the modal already so it does not display on page load so that would load twice

我将一个“隐藏”类附加到模式，这样它就不会在页面加载中显示，这样就会加载两次。

even if I remove the hide class and set the element id to display:none and add console.log("THE MODAL CLOSED"); to the function above when I hit close nothing happens.

即使我删除了隐藏类并设置元素id以显示:none和add console。日志(“模态封闭”);对于上面的函数，当我点击关闭时，什么都没有发生。

10 个解决方案

#1

Bootstrap 3

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

See getbootstrap.com/javascript/#modals-events

看到getbootstrap.com/javascript/ # modals-events

Bootstrap 2.3.2

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

See getbootstrap.com/2.3.2/javascript.html#modals → Events

看到getbootstrap.com/2.3.2/javascript.html #情态动词→事件

#2

For Bootstrap v3.0, you just need to bind an event like this:

对于Bootstrap v3.0，您只需要绑定这样的事件:

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

See the Modal Usage section of the docs here:

请参见这里的文档的模式使用部分:

http://getbootstrap.com/javascript/#modals-usage

http://getbootstrap.com/javascript/ modals-usage

See this JsFiddle for a working example:

看看这个JsFiddle的工作例子:

http://jsfiddle.net/kRLQ4/439/

http://jsfiddle.net/kRLQ4/439/

#3

Starting Bootstrap 3 (edit: still the same in Bootstrap 4) there are 2 instances in which you can fire up events, being:

启动引导3(编辑:在Bootstrap 4中仍然是相同的)有2个实例可以触发事件:

1. When modal "hide" event starts

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

2. When modal "hide" event finished

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

Ref: http://getbootstrap.com/javascript/#js-events

裁判:http://getbootstrap.com/javascript/ # js-events

#4

In stead of "live" you need to use "on" event, but assign it to the document object:

代替“live”，您需要使用“on”事件，但将其分配给文档对象:

Use:

使用:

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

#5

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

#6

Bootstrap provide events that you can hook into modal, like if you want to fire a event when the modal has finished being hidden from the user you can use hidden.bs.modal event like this

Bootstrap提供了您可以钩入模式的事件，例如，如果您想要触发一个事件，当该模式已经被用户隐藏时，您可以使用hidden.b。模态这样的事件

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

Check a working fiddle here read more about modal methods and events here in Documentation

在这里检查一个工作的小提琴，阅读更多的关于模式的方法和事件在这里的文件。

#7

I've seen many answers regarding the bootstrap events such as hide.bs.modal which triggers when the modal closes.

我已经看到了许多关于引导事件的答案，比如hide.bs。模态在模态关闭时触发。

There's a problem with those events: any popups in the modal (popovers, tooltips, etc) will trigger that event.

这些事件有一个问题:模式中的弹出窗口(弹出窗口、工具提示等)将触发该事件。

There is another way to catch the event when a modal closes.

还有一种方法可以在模式关闭时捕捉事件。

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

Bootstrap uses the in class when the modal is open. It is very important to use the hidden event since the class in is still defined when the event hideis triggered.

当模式打开时，引导程序使用在类中。使用隐藏事件是非常重要的，因为当事件隐藏被触发时，类仍然被定义。

This solution will not work in IE8 since IE8 does not support the Jquery :not() selector.

由于IE8不支持Jquery，所以这个解决方案在IE8中不起作用。

#8

I'm jumping in super late here, but for people using Bootstrap modals with React I've been using MutationObserver to detect changes in a modal's visibility and adjusting the state accordingly - this method could be applied to run any function when the modal is closed:

我在这里跳得很晚，但是对于那些使用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
          });
        }
    });
}

For those wondering about modern browser support, CanIUse has MutationObserver's coverage at around 87%

对于那些对现代浏览器支持感到疑惑的人来说，CanIUse拥有大约87%的MutationObserver覆盖率。

Hope that helps someone :)

希望帮助某人:)

Cheers,

欢呼,

Jake

杰克

#9

I was having the same issues as some with

我和一些人有同样的问题。

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

You need to place this at the bottom of the page, placing it at the top never fires the event.

你需要把它放在页面的底部，放在顶部永远不会触发事件。

#10

Bootstrap 4:

引导4:

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

hide.bs.modal: This event is fired immediately when the hide instance method has been called.

hide.bs。模式:当调用隐藏实例方法时，该事件立即被触发。

hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

hidden.bs。模态:当模态已经被用户隐藏时，这个事件被触发(将等待CSS转换完成)。