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:none
i dodam console.log("THE MODAL CLOSED");
do powyższej funkcji, gdy uderzę blisko, nic się nie dzieje.
źródło
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.$('#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.Bootstrap 4
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
źródło
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”
2. Po zakończeniu modalnego zdarzenia „ukryj”
Patrz: http://getbootstrap.com/javascript/#js-events
źródło
Zamiast zdarzenia „na żywo” musisz użyć zdarzenia „on”, ale przypisz je do obiektu dokumentu:
Posługiwać się:
źródło
źródło
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
Sprawdź działające skrzypce tutaj czytaj więcej o metodach modalnych i zdarzeniach tutaj w Dokumentacji
źródło
Bootstrap 4:
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).
źródło
Zrobiłbym to w ten sposób:
Reszta została już napisana przez innych. Polecam również przeczytanie dokumentacji: metoda jquery - on
źródło
Widziałem wiele odpowiedzi dotyczących zdarzeń ładowania początkowego, takich jak
hide.bs.modal
wyzwalanie 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.
Bootstrap używa
in
klasy, gdy modal jest otwarty. Bardzo ważne jest użyciehidden
zdarzenia, ponieważ klasain
jest nadal definiowana podczas zdarzeniahide
zostanie wyzwolone.To rozwiązanie nie będzie działać w IE8, ponieważ IE8 nie obsługuje
:not()
selektora Jquery .źródło
Miałem te same problemy, co niektóre
Musisz umieścić to na dole strony, umieszczenie go na górze nigdy nie uruchamia wydarzenia.
źródło
$("#myModal")
wywołaniu selektora jQuery elementmyModal
DOM 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).jeśli chcesz uruchomić funkcję przy każdym zamknięciu modalnym, możesz użyć tej metody,
Nie musisz więc za każdym razem określać modalnych identyfikatorów.
źródło