Mam modalne okno dialogowe ładowania początkowego, które chcę wyświetlić na początku, a następnie, gdy użytkownik kliknie stronę, znika. Mam następujące:
$(function () {
$('#modal').modal(toggle)
});
<div class="modal" id='modal'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Error:</h3>
</div>
<div class="modal-body">
<p>Please correct the following errors:</p>
</div>
</div>
</div>
Modal jest wyświetlany początkowo, ale nie zamyka się po kliknięciu poza modalem. Ponadto obszar zawartości nie jest wyszarzony. Jak mogę ustawić moduł, aby wyświetlał się początkowo, a następnie zamykał, gdy użytkownik kliknie poza obszarem? Jak mogę wyszarzyć tło, tak jak w wersji demo?
jquery
twitter-bootstrap
modal-dialog
Nick B.
źródło
źródło
$("#yourModal").modal()
lub$('.modal').modal()
?Odpowiedzi:
Umieść
modal('toggle')
zamiastmodal(toggle)
źródło
aby zamknąć modal bootstrap , możesz przekazać „ukryj” jako opcję metody modalnej w następujący sposób
Proszę spojrzeć na działające skrzypce tutaj
bootstrap zapewnia również zdarzenia, które można podłączyć do funkcjonalności modalnej , np. jeśli chcesz uruchomić zdarzenie, gdy modal jest już ukryty przed użytkownikiem, możesz użyć hidden.bs.modal zdarzenia możesz przeczytać więcej o metodach modalnych i zdarzeniach tutaj w Dokumentacja
Jeśli żadna z powyższych metod nie działa, podaj identyfikator swojemu przyciskowi zamykania i wciśnij przycisk zamykania.
źródło
toggle
zachowuje nakładkę i nie jest rozwiązaniem. Zawsze należy użyć jednejshow
lubhide
.lub
powinno działać.
Ale jeśli nic więcej nie działa, możesz bezpośrednio wywołać modalny przycisk zamknięcia:
źródło
$('#modal').modal('hide')
ale mogę go zamknąć za pomocą,$('#modal').modal('toggle')
ale po zamknięciu wyświetla pionowy pasek przewijania. Więc dla mnie$('#modal').hide()
działało idealnie, ale chcę wiedzieć, czy to stworzy jakieś problemy? I koduję w środku,$('#modal .close').click()
więc nie sądzę, żebym mógł użyć go do zamknięcia modalu.to działało dla mnie:
użyj tego linku modal close
źródło
Uruchomienie tego połączenia za pośrednictwem klasy
($(".my-modal"))
nie będzie działać.źródło
Spróbuj tego
źródło
ten jest całkiem dobry i działa również w kanciastym 2
źródło
$('#modal').modal('toggle');
nie ma żadnego efektu.Moim pięcioma centami na tym jest to, że nie chcę celować w modal bootstrap z identyfikatorem i widząc, że powinien być tylko jeden mod na raz, poniższe powinny być wystarczające do usunięcia modalu, ponieważ przełączanie może być niebezpieczne :
źródło
<body>
, mają dodane klasy, które również musiałyby zostać przywrócone. Najlepszą odpowiedzią jest użycie'hide'
metody.W niektórych okolicznościach winowajcą może być błąd pisania. Na przykład upewnij się, że masz:
i nie
Zwróć uwagę na podwójne „ss” w drugim przykładzie, które spowoduje błąd przycisku Zamknij.
źródło
Możemy zamknąć modalne okienko wyskakujące na następujące sposoby:
źródło
$('.modal.in').modal('hide');
użyj powyższego kodu, aby ukryć tło modalne, jeśli używasz wielu modalnych popów na jednej stronie.
źródło
$('.modal').modal('hide');
zrobi.źródło
źródło
$('#DeleteModal').modal('hide');
jest istotne tutaj?możesz użyć;
źródło
Użycie modal.hide ukryłoby tylko modal. Jeśli używasz nakładki pod modułem, nadal tam będzie. użyj połączenia kliknięcia, aby faktycznie zamknąć modal i usunąć nakładkę.
źródło
Innym sposobem na to jest to, że najpierw usuwasz klasę modal-open, która zamyka modal. Następnie usuwasz klasyczne tło modalne, które usuwa szarawą pokrywę modalu.
Można użyć następującego kodu:
źródło
Dodaj przycisk w trybie modalnym
data-dismiss="modal"
i ukryj przycisk za pomocądisplay: none
. Oto jak to będzie wyglądaćTeraz, gdy chcesz zamknąć modalnie Programowo, po prostu uruchom zdarzenie kliknięcia na tym przycisku, które nie jest widoczne dla użytkownika
W Javascript możesz wywołać kliknięcie tego przycisku w następujący sposób:
źródło
Ten kod działał idealnie dla mnie, aby zamknąć modal (używam bootstrap 3.3)
źródło
W moim przypadku strona główna, z której uruchomiono modalne bootstrap, zaczęła nie odpowiadać po użyciu
$("#modal").modal('toggle');
, ale zaczęła odpowiadać w następujący sposób:źródło
To działa dobrze
Jednakże, gdy masz wiele modów układanych jeden na drugim, nie jest to skuteczne, więc zamiast tego działa
źródło
Po pewnym teście stwierdziłem, że na modal bootstrap trzeba poczekać jakiś czas przed wykonaniem
$(.modal).modal('hide')
po wykonaniu$(.modal).modal('show')
. I stwierdziłem, że w moim przypadku potrzebuję co najmniej 500 milisekund przerwy między nimi.Oto mój przypadek testowy i rozwiązanie:
źródło
Możesz zobaczyć to odniesienie ale jeśli ten link został usunięty, przeczytaj ten opis:
Wywołaj modal o identyfikatorze myModal z jednym wierszem JavaScript:
Opcje
Opcje można przekazać za pomocą atrybutów danych lub JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data- , jak w data-backdrop = "" .
Metody
.modal (opcje)
Aktywuje twoją treść jako modal. Akceptuje opcjonalny obiekt opcji.
.modal („przełącznik”)
Ręcznie przełącza modal. Powraca do programu wywołującego, zanim modal zostanie faktycznie pokazany lub ukryty (tj. Przed wystąpieniem zdarzenia pokazanego.bs.modal lub hidden.bs.modal).
.modal („pokaż”)
Ręcznie otwiera modal. Powraca do programu wywołującego przed faktycznym wyświetleniem modalu (tj. Przed wystąpieniem zdarzenia pokazanego.bs.modal).
.modal („ukryj”)
Ręcznie ukrywa modal. Powraca do programu wywołującego przed faktycznym ukryciem modalu (tj. Przed wystąpieniem zdarzenia hidden.bs.modal).
.modal („handleUpdate”)
Ręcznie wyreguluj pozycję modalu, jeśli wysokość modalu zmienia się, gdy jest on otwarty (tj. W przypadku pojawienia się paska przewijania).
.modal („usuń”)
Niszczy modal elementu.
Wydarzenia
Klasa modalna Bootstrap ujawnia kilka zdarzeń umożliwiających podłączenie do funkcjonalności modalnej. Wszystkie zdarzenia modalne są uruchamiane w samym module (tj. W **). Typ Opis
źródło
Poza tym możesz „kliknąć” na „x”, który zamyka okno dialogowe. Na przykład:
$(".ui-dialog-titlebar-close").click();
źródło
W moim przypadku użyłem przycisku, aby pokazać modal
Więc w moim kodzie, aby zamknąć modal (który ma id = 'my-modal-to-show'), wywołuję tę funkcję (w maszynopisie Angular):
Jeśli wywołam $ (modalId) .modal ('hide'), to nie zadziała i nie wiem dlaczego
PS .: w moim modale kodowałem ten element przycisku również klasą .close
źródło
czasami rozwiązanie nie działa, więc trzeba poprawnie usunąć klasę i dodać ekran css: brak ręcznie.
źródło