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


530

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

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

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

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

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

Ответы:


1140

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


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

2
Я не вижу такого поведения с Bootstrap 3, вы можете сделать скрипку?
sp00n

7
Этот ответ, вероятно, должен упомянуть разницу между hidden.bs.modal и hide.bs.modal. Hidden срабатывает, когда CSS-анимация завершена, но в моем тестировании, если анимации нет, она никогда не срабатывает (хотя это может быть просто ошибка). Если вы работаете с управлением данными, может быть безопаснее использовать hide.bs.modal, который запускается, как только вызывается .modal ('hide'). getbootstrap.com/javascript/#modals-usage - см. подраздел «События».
Эван Стейнкершнер,

2
Bootstrap 3: работает, когда я нажимаю на модальный тег, помеченный как data-dismiss="modal"(например, кнопка закрытия), но не работает, когда я нажимаю на область черного фона, окружающую модал. Модал закрывается, но затем его нельзя открыть, пока страница не обновится. Я пробовал оба 'hidden.bs.modal'и 'hide.bs.modal'безрезультатно.
Маркито

5
@marquito То, что вы можете сделать (то, что я делаю), это использовать так: таким $('#myModal').modal({ backdrop: 'static', keyboard: false });образом, модальное окно не будет закрываться ни при нажатии на серую область, ни при нажатии клавиши Esc.
15:15

123

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


1
Для тех, кто считает, что этот пост ищет реализацию этого типа обратного вызова, есть модуль расширения для Bootstrap, который включает эту функцию, а также множество других полезных функций для динамического создания диалогов / предупреждений / подтверждений: bootboxjs.com
jkriddle

Ответ Рикардо Лимы, приведенный ниже, теперь является правильным методом для мониторинга событий в jQuery / bootstrap
sbonami

@ meatballs по-прежнему остается верным голосом за работающий пример ... даже если bind уже устарел.
Стивен Паттен

@ 100crewood Чувак, теперь это находка! Спасибо! Re: bootboxjs.com
Стивен Паттен

46

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


1
Это помогло мне исправить мою модальную ошибку Bootstrap, которая добавляла 15px отступа к телу при закрытии любого модального режима. Спасибо!
Сэм Малаек

2
Хорошо для показа 2 событий. Лучше для новичков, таких как я, отметить, что это событие должно быть размещено ниже модального поля для запуска события.
Линнелл Эммануэль Нери

18

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

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

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

1
Вот как вы должны это сделать, если модальное добавляется динамически. Сэкономил мне кучу времени.
Дилан Вандер Берг

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

6

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

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

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


4

Bootstrap 4:

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

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

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


Этот способ также действителен для BS3. Пожалуйста, смотрите принятый ответ для BS2 (не рекомендуется).
Роланд

3

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

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

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


2

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

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

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

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

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

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


2

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

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

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


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

Я бы определил правила немного жестче, чем это. Когда $("#myModal")вызывается селектор jQuery, HTML-элемент с идентификатором myModalпотребностей должен существовать в DOM. Таким образом, вы могли бы иметь этот код в верхней части страницы, но поместить в $(document).on("ready", function(){ ... });(или аналогичную функцию, которая вызывается после заполнения DOM элементом).
Энди Джи

0

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.