Как обработать модальное закрытие события в 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);
});

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


Ответы:


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…
})

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>

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

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