Привязать функцию к Twitter Bootstrap Modal Close

Я использую Twitter Bootstrap lib в новом проекте, и я хочу, чтобы часть страницы обновилась и получила последние данные json о модальном закрытии. Я не вижу этого нигде в документации, может кто-то указать мне на это или предложить решение.

две проблемы с помощью проверенных методов

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

я прикрепляю класс" скрыть " к модальному уже так, что он не отображается при загрузке страницы, чтобы загрузить дважды

даже если я удалю скрыть class и установите идентификатор элемента в display:none и добавить console.log("THE MODAL CLOSED"); для функции выше, когда я нажимаю закрыть, ничего не происходит.

11 ответов


Bootstrap 3

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

см.getbootstrap.com/javascript/#modals-events

Bootstrap 2.3.2

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

см.getbootstrap.com/2.3.2/javascript.html#modals → события


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


начиная с Bootstrap 3 (edit: все то же самое в 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!');
});

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


вместо " live "Вам нужно использовать событие" on", но назначить его объекту документа:

использование:

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

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

загрузки обеспечить события, которые вы можете подключить в модальные, например, если вы хотите, чтобы огонь событие когда модальный закончил быть скрытым от пользователя, вы можете использоватьскрыто.bs.модальный событие такой

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

проверить рабочий скрипку здесь подробнее о модальных методах и событиях читайте здесь в документация


Я видел много ответов относительно событий начальной загрузки, таких как hide.bs.modal, который срабатывает, когда модальные закрыт.

есть проблема с этими событиями: любые всплывающие окна в модальном (всплывающие окна, всплывающие подсказки и т. д.) вызовут это событие.

есть еще один способ поймать событие, когда модальный закрывается.

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

Bootstrap использует in класс, когда модальный открыт. Очень важно использовать hidden событие С класс in еще определяется, когда событие hideсрабатывает.

это решение не будет работать в IE8, так как IE8 не поддерживает Jquery :not() селектор.


Я прыгаю в супер поздно здесь, но для людей, использующих Bootstrap модалы с React я использую 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 имеет покрытие mutationobserver'а в около 87%

надеюсь, что это поможет кому-то :)

спасибо,

Джейк


У меня были те же проблемы, что и у некоторых с

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

вам нужно поместить это в нижней части страницы, разместив его вверху, никогда не запускает событие.


Bootstrap 4:

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

спрятаться.bs.модальный: Это событие запускается немедленно при вызове метода экземпляра hide.

спрятан.bs.модальный: Это событие запускается, когда модальный закончит скрываться от пользователя (будет ждать завершения CSS-переходов).


Я бы сделал так:

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

остальное уже написано другими. Также рекомендую ознакомиться с документацией:в jQuery - метод