Powiąż funkcję z modułem Twitter Bootstrap Modal Close

530

Korzystam z biblioteki Twitter Bootstrap w nowym projekcie i chcę, aby część strony odświeżyła i pobrała najnowsze dane Json po zamknięciu modalnym. Nie widzę tego nigdzie w dokumentacji, ktoś mógłby mi to wskazać lub zaproponować rozwiązanie.

Dwa problemy z użyciem udokumentowanych metod

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

Do klasy modalnej dołączam już klasę „ukryj”, aby nie wyświetlała się przy ładowaniu strony, więc ładowałaby się dwukrotnie

nawet jeśli usunę klasę ukrywania i ustawię identyfikator elementu na display:nonei dodam console.log("THE MODAL CLOSED");do powyższej funkcji, gdy uderzę blisko, nic się nie dzieje.

BillPull
źródło

Odpowiedzi:

1137

Bootstrap 3 i 4

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

Bootstrap 3: getbootstrap.com/javascript/#modals-events

Bootstrap 4: getbootstrap.com/docs/4.1/components/modal/#events

Bootstrap 2.3.2

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

Zobacz getbootstrap.com/2.3.2/javascript.html#modals → Wydarzenia

Ricardo Lima
źródło
1
Wydaje się, że to działa, z wyjątkiem, z jakiegoś powodu, gdy najechanie myszką na przycisk w stopce modalnej, to również strzela. Ten przycisk jest zwykłym przyciskiem wysyłania: <input type = "upload" class = "btn btn-info" value = "Go" /> Wiesz, jak nie wywoływać zdarzenia ukrywania po najechaniu na niego kursorem? Lub, jak mogę wykryć, że został zwolniony z powodu najechania kursorem? BTW: nawet jeśli zdarzenie jest uruchomione, okno modalne nie zamyka się.
Guy
2
Nie widzę takiego zachowania w przypadku Bootstrap 3, czy możesz zrobić skrzypce?
sp00n
7
Ta odpowiedź powinna prawdopodobnie wskazywać na różnicę między hidden.bs.modal i hide.bs.modal. Ukryty jest uruchamiany po zakończeniu animacji CSS, ale w moich testach, jeśli nie ma żadnych animacji, nigdy się nie uruchamia (może to być tylko błąd). Jeśli pracujesz z zarządzaniem danymi, bezpieczniejsze może być użycie hide.bs.modal, który jest uruchamiany natychmiast po wywołaniu .modal ('hide'). getbootstrap.com/javascript/#modals-usage - patrz podsekcja Wydarzenia.
Evan Steinkerchner,
2
Bootstrap 3: Działa, kiedy klikam znacznik modalny oznaczony jako data-dismiss="modal"(jak przycisk zamykania), ale nie działa, gdy klikam czarny obszar tła otaczający modal. Modal jest odrzucany, ale nie można go ponownie otworzyć, dopóki strona nie zostanie odświeżona. Próbowałem obu 'hidden.bs.modal'i 'hide.bs.modal'bezskutecznie.
marquito,
5
@marquito Co możesz zrobić (to, co robię), użyj tego w następujący $('#myModal').modal({ backdrop: 'static', keyboard: false });sposób : w ten sposób modal nie zamknie się po kliknięciu na szarym obszarze ani po naciśnięciu klawisza Esc.
aesede
123

Bootstrap 4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

Zobacz ten JSFiddle dla działającego przykładu:

https://jsfiddle.net/6n7bg2c9/

Zobacz sekcję wydarzeń modalnych w dokumentach tutaj:

https://getbootstrap.com/docs/4.3/components/modal/#events

aar0n
źródło
1
Dla każdego, kto znajdzie ten post i chce zaimplementować ten typ wywołania zwrotnego, jest moduł rozszerzenia Bootstrap, który zawiera tę funkcjonalność, a także wiele innych pomocnych funkcji do dynamicznego tworzenia okien dialogowych / alertów / potwierdzeń: bootboxjs.com
jkriddle
Odpowiedź Ricardo Limy poniżej jest teraz poprawną metodą monitorowania zdarzeń w jQuery / bootstrap
sbonami
@meatballs wciąż głosuje za działającym przykładem .. nawet jeśli bind jest przestarzały.
Stephen Patten
@ 100acrewood Koleś, teraz to znalezisko! Dziękuję Ci! re: bootboxjs.com
Stephen Patten
46

Uruchamianie Bootstrap 3 ( edycja: wciąż to samo w Bootstrap 4 ) istnieją 2 instancje, w których można uruchamiać zdarzenia, a mianowicie:

1. Po uruchomieniu modalnego zdarzenia „ukryj”

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  

2. Po zakończeniu modalnego zdarzenia „ukryj”

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

Patrz: http://getbootstrap.com/javascript/#js-events

aesede
źródło
1
To pomogło mi naprawić mój błąd modalny Bootstrap, w którym dodawałby 15px padding-prawo do ciała po zamknięciu dowolnego modalu. Dzięki!
Sam Malayek,
2
Dobry do pokazania 2 wydarzeń. Lepiej dla początkujących, takich jak ja, zauważyć, że musi to być umieszczone poniżej modalu, aby wydarzenie zostało odpalone.
Lynnell Emmanuel Neri
18

Zamiast zdarzenia „na żywo” musisz użyć zdarzenia „on”, ale przypisz je do obiektu dokumentu:

Posługiwać się:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
Oscar
źródło
1
Tak musisz to zrobić, jeśli modal jest dodawany dynamicznie. Zaoszczędził mi mnóstwo czasu.
Dylan Vander Berg
15
$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});
SUNny.K
źródło
6

Bootstrap zapewnia zdarzenia, które można podłączyć do modalu , np. Jeśli chcesz uruchomić zdarzenie, gdy modal skończy się ukryty przed użytkownikiem, możesz użyćzdarzenia hidden.bs.modal , takiego jak to

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

Sprawdź działające skrzypce tutaj czytaj więcej o metodach modalnych i zdarzeniach tutaj w Dokumentacji

Subodh Ghulaxe
źródło
4

Bootstrap 4:

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

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

sendon1982
źródło
Ten sposób dotyczy także BS3. Proszę zobaczyć zaakceptowaną odpowiedź na BS2 (przestarzałe) sposób.
Roland
3

Zrobiłbym to w ten sposób:

$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

Reszta została już napisana przez innych. Polecam również przeczytanie dokumentacji: metoda jquery - on

tkartas
źródło
2

Widziałem wiele odpowiedzi dotyczących zdarzeń ładowania początkowego, takich jak hide.bs.modalwyzwalanie po zamknięciu modalu.

Wystąpił problem z tymi zdarzeniami: wszelkie wyskakujące okienka w module (popovers, podpowiedzi itp.) Spowodują to zdarzenie.

Istnieje inny sposób na złapanie zdarzenia po zamknięciu modalu.

$(document).on('hidden','#modal:not(.in)', function(){} );

Bootstrap używa inklasy, gdy modal jest otwarty. Bardzo ważne jest użycie hiddenzdarzenia, ponieważ klasa injest nadal definiowana podczas zdarzeniahide zostanie wyzwolone.

To rozwiązanie nie będzie działać w IE8, ponieważ IE8 nie obsługuje :not()selektora Jquery .

Tortus
źródło
2

Miałem te same problemy, co niektóre

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

Musisz umieścić to na dole strony, umieszczenie go na górze nigdy nie uruchamia wydarzenia.

Michael Granger
źródło
W rzeczy samej. Dobrze, że wspomniałeś, że musi być umieszczony poniżej modalu, aby odpalić wydarzenie.
Lynnell Emmanuel Neri
Zdefiniowałbym reguły nieco bardziej rygorystycznie. Po $("#myModal")wywołaniu selektora jQuery element myModalDOM o identyfikatorze musi istnieć w DOM. Możesz mieć ten kod na górze strony, ale umieszczony w $(document).on("ready", function(){ ... });(lub podobnej funkcji, która jest wywoływana po zapełnieniu elementu DOM elementem).
Andy Gee
0

jeśli chcesz uruchomić funkcję przy każdym zamknięciu modalnym, możesz użyć tej metody,

$(document).ready(function (){
    $('.modal').each(function (){
        $(this).on('hidden.bs.modal', function () {
            //fires when evey popup close. Ex. resetModal();
        });
    });
});

Nie musisz więc za każdym razem określać modalnych identyfikatorów.

Sahan
źródło