Привязать функцию к Twitter Bootstrap Модальный Закрыть

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

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

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

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

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

Бутстрап 3 и 4

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

Бутстрап 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 → События

Bootstrap 4

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

Посмотрите этот JSFiddle для рабочего примера:

https://jsfiddle.net/6n7bg2c9/

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

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

Запуск 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

Вместо «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')
});

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

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

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

Bootstrap 4:

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

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

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

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

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

Остальное уже написано другими. Я также рекомендую прочитать документацию: jquery - по методу

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

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

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

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

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

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

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

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

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

если вы хотите запустить функцию при каждом закрытии режима, вы можете использовать этот метод,

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

Так что вам не нужно каждый раз указывать модальные идентификаторы.