Как обработать модальное закрытие события в Twitter Bootstrap?

191

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

Например, давайте возьмем этот модал в качестве примера:

<div class="modal-header">
    <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
    <a href="#" class="btn close_link" data-dismiss="modal">Close</a>   
</div>

Кнопка X вверху и кнопка закрытия внизу могут скрывать / закрывать модальные окна из-за data-dismiss="modal". Интересно, могу ли я как-нибудь это послушать?

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

$("#salesitems_modal").load(url, data, function() { 
     $(this).modal('show'); 
     $(this).find(".close_link").click(modal_closing);
});

Что вы думаете?

jquery twitter-bootstrap modal-dialog Houman
источник
2
возможный дубликат Привязать функцию к Twitter Bootstrap Модальный Закрыть
Сальвадор Дали

Ответы:

370

Обновлено для Bootstrap 3 и 4

Документы Bootstrap 3 и Bootstrap 4 ссылаются на два события, которые вы можете использовать.

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

И приведите пример того, как их использовать:

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

Legacy Bootstrap 2.3.2 ответ

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

hide : это событие вызывается сразу же после вызова метода hide instance.
скрытый : это событие вызывается, когда модал завершил скрытие от пользователя (будет ожидать завершения переходов css).

И предоставляет пример того, как их использовать:

$('#myModal').on('hidden', function () {
    // do something…
})
albertedevigo
источник
1
По какой-то причине это срабатывает и для меня, когда я делаю мышку на кнопке, которая есть у меня в модале. И когда я отправляю форму в модальном режиме (даже до того, как сработает событие onSubmit). Кто-нибудь знает, как остановить это поведение?
Парень
2
Чтобы обеспечить некоторый дополнительный контекст, я бы рекомендовал использовать $ (document) .on ('hidden', '#myModal', function () {// сделать что-то}); чтобы это не работало в определенных ситуациях, например, когда это содержится в объявлении функции $ (document) .ready.
Гарет Дейн
привет, я хочу применить модальные скрытые jquery. и я применил тот же код в моем проекте, но он не работает. Есть ли у вас какие-либо предложения для того же?
Харди Шах
@HardiShah, вы должны задать новый вопрос, включая ваш код и / или ошибки.
albertedevigo
68

Если ваш модальный div динамически добавлен, используйте (для начальной загрузки 3)

$(document).on('hide.bs.modal','#modal-id', function () {
                alert('');
 //Do stuff here
});

Это будет работать и для не динамического контента.

Смущенный
источник
разница между скрытой и скрытой ??
Махи
3
Событие @mahi .hide наступает сразу после вызова метода hide instance. тогда как скрытое событие вызывается, когда модал закончил, будучи скрытым от пользователя (будет ожидать завершения переходов CSS).
Confused
18

Существует две пары модальных событий: одно «показать» и «показано», другое - «скрыть» и «скрыть». Как видно из названия, событие скрытия запускается, когда модальное время приближается к ближнему, например, при нажатии на крестик в правом верхнем углу или на кнопку закрытия или так далее. В то время как скрытый срабатывает после того, как модал на самом деле близко. Вы можете сами проверить эти события. Например:

$( '#modal' )
   .on('hide', function() {
       console.log('hide');
   })
   .on('hidden', function(){
       console.log('hidden');
   })
   .on('show', function() {
       console.log('show');
   })
   .on('shown', function(){
      console.log('shown' )
   });

И, что касается вашего вопроса, я думаю, что вы должны слушать событие «скрыть» вашего модального.

Лео
источник
1

Bootstrap Модальные события:

  1. hide.bs.modal => Происходит, когда модал собирается быть скрытым.
  2. hidden.bs.modal => Происходит, когда модальное окно полностью скрыто (после завершения CSS-переходов).
<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

Я надеюсь, это поможет.

vishpatel73
источник