Як поводитися з модальним заходом закриття у Twitter Bootstrap?


191

У завантажувальній програмі Twitter, дивлячись на документацію щодо модалів . Я не зміг зрозуміти, чи є спосіб прослухати близьку подію модалу та виконати функцію.

наприклад, давайте взяти цей приклад як приклад:

<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 стосуються двох подій, які можна використовувати.

hid.bs.modal : ця подія запускається негайно, коли викликається метод примірника приховування.
hidden.bs.modal : Ця подія запускається, коли модаль закінчено приховати від користувача (буде чекати завершення переходів CSS).

Наведіть приклад, як ними користуватися:

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

Відповідь Legacy Bootstrap 2.3.2

Документація Bootstrap стосується двох подій, які ви можете використовувати.

сховати : Ця подія запускається негайно, коли викликається метод примірника приховування.
приховано : ця подія запускається, коли модал закінчено приховати від користувача (буде чекати завершення переходів css).

Наводить приклад того, як ними користуватися:

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

1
Чомусь це спрацьовує і для мене, коли я натискаю кнопку, яку я маю в модалі. І коли я надсилаю форму в модальному режимі (ще до запуску події onSubmit). Хтось знає, як зупинити таку поведінку?
Хлопець

2
Щоб забезпечити додатковий контекст, я рекомендую використовувати $ (document) .on ('hidden', '#myModal', function () {// робити щось}); щоб запобігти цьому не працювати в певних ситуаціях, наприклад, коли це міститься в декларації функції $ (документ).
Гарет Дайн

привіт, я хочу застосувати модальний прихований jquery. і я застосував той самий код у своєму проекті, але він не працює. Чи є у вас якісь пропозиції щодо того ж?
Харді Шах

@HardiShah, вам слід задати нове запитання, включаючи ваш код та / або помилки.
albertedevigo

68

Якщо ваш модальний поділ динамічно додається, тоді використовуйте (для завантажувального 3)

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

Це буде працювати і для нединамічного контенту.


різниця між прихованим проти прихованого ??
Махі

3
Подія @mahi .hide запускається одразу після виклику методу приховати примірник. тоді як прихована подія запускається, коли модал закінчено приховати від користувача (буде чекати завершення переходів CSS).
Плутати

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

Модальні події завантаження:

  1. hid.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.