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

Question

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

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

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

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

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

Answer 1

Bootstrap 3 & 4

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

Bootstrap 3: getbootstrap.com / javascript / # модальные события

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 ( 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!');
});

Ссылка: http://getbootstrap.com/javascript/#js-events

Answer 4

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

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

$(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 предоставляют события, которые вы можете подключить к модальным , например, если вы хотите запустить событие когда модал закончил быть скрытым от пользователя, вы можете использовать событие hidden.bs.modal как это

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

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

Answer 7

Bootstrap 4:

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

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

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

Answer 8

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

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

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

Answer 9

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

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

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

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

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

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

Answer 10

Я прыгаю здесь очень поздно, но для людей, использующих модалы 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%

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

Ура,

Джейк