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

137

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

например. давайте возьмем этот модальный пример:

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

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

Теги:
modal-dialog

3 ответа

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

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

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

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

И приведен пример их использования:

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

Наследие Bootstrap 2.3.2 ответ

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

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

И приведен пример их использования:

$('#myModal').on('hidden', function () {
    // do something…
})
Поделиться
  • 1
    По некоторым причинам это увольняет меня также, когда я делаю мышку на кнопке, которую я имею в модале. И когда я отправляю форму в модальном режиме (даже до того, как сработает событие onSubmit). Кто-нибудь знает, как остановить это поведение?
  • 0
    @ Гай, ты должен задать новый вопрос и предоставить код
Показать ещё 4 комментария
52

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

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

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

Поделиться
  • 0
    разница между скрытой и скрытой ??
  • 3
    Событие @mahi .hide наступает сразу после вызова метода скрытия экземпляра. тогда как скрытое событие вызывается, когда модал закончил, будучи скрытым от пользователя (будет ожидать завершения переходов CSS).
16

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

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

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

Поделиться

Ещё вопросы

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