Jak obsłużyć modalne zdarzenie zamknięcia w Twitterze Bootstrap?


191

W bootstrapie na Twitterze przeglądanie dokumentacji modalnej . Nie byłem w stanie dowiedzieć się, czy istnieje sposób na odsłuchanie bliskiego zdarzenia modalu i wykonanie funkcji.

np. weźmy ten modal jako przykład:

<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>

Przycisk X na górze i przycisk zamykania na dole mogą zarówno ukrywać / zamykać moduł z powodu data-dismiss="modal". Zastanawiam się więc, czy mógłbym jakoś tego posłuchać?

Alternatywnie mógłbym to zrobić ręcznie tak, tak myślę ...

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

Co myślisz?


Odpowiedzi:


369

Zaktualizowano dla Bootstrap 3 i 4

Dokumenty Bootstrap 3 i Bootstrap 4 odnoszą się do dwóch zdarzeń, których można użyć.

hide.bs.modal : To zdarzenie jest uruchamiane natychmiast po wywołaniu metody instancji hide.
hidden.bs.modal : To zdarzenie jest uruchamiane, gdy modal skończy się ukryty przed użytkownikiem (poczeka na zakończenie przejścia CSS).

I podaj przykład, jak z nich korzystać:

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

Odpowiedź Legacy Bootstrap 2.3.2

Dokumentacja Bootstrap dotyczy dwóch zdarzeń, których możesz użyć.

hide : To zdarzenie jest uruchamiane natychmiast po wywołaniu metody instancji hide.
ukryty : To zdarzenie jest uruchamiane, gdy modal skończy się ukryty przed użytkownikiem (będzie czekać na zakończenie przejścia css).

I podaje przykład, jak z nich korzystać:

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

1
Z jakiegoś powodu jest to dla mnie wyzwalające również po najechaniu myszką na przycisk, który mam w module. A kiedy przesyłam formularz w module (nawet przed uruchomieniem zdarzenia onSubmit). Czy ktoś wie jak zatrzymać to zachowanie?
Guy

2
Aby zapewnić dodatkowy kontekst, zaleciłbym użycie $ (document) .on ('hidden', '#myModal', function () {// zrób coś}); aby nie działało to w niektórych sytuacjach, na przykład gdy jest to zawarte w deklaracji funkcji $ (dokument) .ready.
Gareth Daine

cześć, chcę zastosować modalną ukrytą jquery. i zastosowałem ten sam kod w moim projekcie, ale nie działa. Czy masz na to jakieś sugestie?
Hardi Shah,

@HardiShah, powinieneś zadać nowe pytanie, w tym swój kod i / lub błędy.
albertedevigo,

68

Jeśli Twój modalny div jest dodawany dynamicznie, użyj (dla bootstrap 3)

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

Będzie to działać również w przypadku treści niedynamicznych.


różnica między ukrywaniem a ukrywaniem ??
Mahi

3
Zdarzenie @mahi .hide jest uruchamiane natychmiast po wywołaniu metody instancji hide. podczas gdy ukryte zdarzenie jest uruchamiane, gdy modal skończy się ukryty przed użytkownikiem (będzie czekać na zakończenie przejścia CSS).
Mylić

18

Istnieją dwie pary zdarzeń modalnych, jedno to „pokaż” i „pokazane”, drugie to „ukryj” i „ukryte”. Jak widać z nazwy, ukryj pożary zdarzeń, gdy zbliża się modal, na przykład klikając krzyżyk w prawym górnym rogu lub przycisk zamykania itd. Podczas gdy ukryty jest uruchamiany po tym, jak modal jest już blisko. Możesz przetestować te zdarzenia samodzielnie. Na przykład:

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

A jeśli chodzi o twoje pytanie, myślę, że powinieneś posłuchać zdarzenia „ukrywania” swojego modalu.


1

Zdarzenia modalne Bootstrap:

  1. hide.bs.modal => Występuje, gdy modal ma zostać ukryty.
  2. hidden.bs.modal => Występuje, gdy modal jest całkowicie ukryty (po zakończeniu przejścia CSS).
<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

Mam nadzieję, że to pomoże.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.