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

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

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

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

Как вы думаете?

Ответы

Ответ 1

Обновлено для 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: это событие вызывается сразу после вызова метода экземпляра скрытия.
скрытый: это событие вызывается, когда модал завершил скрытие от пользователя (будет ожидать завершения переходов css).

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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>

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