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

379

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

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

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

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

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

Теги:
modal-dialog

10 ответов

744
Лучший ответ

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 → События

  • 1
    Кажется, это работает, за исключением того, что при наведении указателя мыши на кнопку в модальном нижнем колонтитуле она также срабатывает. Эта кнопка является обычной кнопкой отправки: <input type = "submit" class = "btn btn-info" value = "Go" /> Есть идеи, как не вызывать событие скрытия при наведении на него курсора? Или как я могу обнаружить, что он был запущен из-за зависания? Кстати: даже если событие происходит, модальное диалоговое окно не закрывается.
  • 2
    Я не вижу такого поведения с Bootstrap 3, вы можете сделать скрипку?
Показать ещё 4 комментария
81

Для Bootstrap v3.0 вам просто нужно связать событие следующим образом:

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

См. раздел "Модальное использование" в документах:

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

См. этот JsFiddle для рабочего примера:

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

  • 1
    Для тех, кто считает, что этот пост ищет реализацию этого типа обратного вызова, есть модуль расширения для Bootstrap, который включает эту функцию, а также множество других полезных функций для динамического создания диалогов / предупреждений / подтверждений: bootboxjs.com
  • 0
    Ответ @Ricardo Lima, приведенный ниже, теперь является правильным методом для мониторинга событий в jQuery / bootstrap.
Показать ещё 3 комментария
25

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

  • 0
    Это помогло мне исправить мою модальную ошибку Bootstrap, которая добавляла 15px отступа к телу при закрытии любого модального режима. Спасибо!
  • 1
    Хорошо для показа 2 событий. Лучше для начинающих, таких как я, заметить, что это событие должно быть размещено ниже модального поля для запуска события.
12
$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});
11

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

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

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
  • 0
    Вот как вы должны это сделать, если модальное добавляется динамически. Сэкономил мне кучу времени.
5

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

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

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

2

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

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

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

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

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

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

1

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

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

Приветствия,

Джейк

0

jQuery bind и on, где не срабатывает, когда модаль закрывается. У меня был больше успеха с live:

$('#my-modal').live('hidden', function(e) {
    // do something
});
0

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

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

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

  • 0
    В самом деле. Хорошо, что вы упомянули, что его нужно разместить под модальным, чтобы запустить событие.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню