Korzystam z modalnego okna dialogowego bootstrap na Twitterze. Kiedy klikam przycisk Prześlij w modalnym oknie dialogowym ładowania początkowego, wysyła żądanie AJAX. Mój problem polega na tym, że tło modalne nie znika. Okno dialogowe modalne znika poprawnie, ale zamiast tego pozostaje „modalne tło w”, które tworzy krycie na ekranie
Co mogę zrobić?
twitter-bootstrap
modal-dialog
paganotti
źródło
źródło
$('#myModal').modal('hide')
? Czy możesz tu podać kod?Odpowiedzi:
Upewnij się, że nie zastępujesz kontenera zawierającego rzeczywiste okno modalne podczas wykonywania żądania AJAX, ponieważ Bootstrap nie będzie w stanie znaleźć odniesienia do niego, gdy spróbujesz go zamknąć. W Ajax complete handler usuń modal, a następnie zastąp dane.
Jeśli to nie pomoże, zawsze możesz zmusić go do odejścia, wykonując następujące czynności:
źródło
$('.modal-backdrop').remove()
wydaje się, że psuje przyszłe moduły otwierające się poprawnie.Upewnij się, że twoje pierwsze wezwanie do
$.modal()
zastosowania zachowania modalnego nie przekazuje więcej elementów, niż zamierzałeś. Jeśli tak się stanie, zakończy się tworzenie instancji modalnej wraz z elementem tła dla KAŻDEGO elementu w kolekcji. W związku z tym może wyglądać, jakby tło zostało pozostawione, gdy faktycznie patrzysz na jeden z duplikatów.W moim przypadku próbowałem stworzyć zawartość modalną w locie za pomocą takiego kodu:
Tutaj komentarz HTML po
</div>
tagu zamykającym oznaczał, że myModal był w rzeczywistości kolekcją jQuery dwóch elementów - div i komentarza. Oba zostały obowiązkowo przekształcone w modale, każdy z własnym elementem tła. Oczywiście modal wykonany z komentarza był niewidoczny oprócz tła, więc kiedy zamknąłem prawdziwy modal (div), wyglądało to tak, jakby tło zostało pozostawione.źródło
Właśnie spędziłem zbyt długo na tym problemie :)
Podczas gdy inne udzielone odpowiedzi są pomocne i poprawne, wydawało mi się trochę nieporządne skuteczne odtworzenie funkcji ukrywania modalnego z Bootstrap, więc znalazłem czystsze rozwiązanie.
Problem polega na tym, że podczas połączenia dochodzi do łańcucha zdarzeń
Kiedy następnie zastąpisz pakiet HTML w wyniku żądania AJAX, zdarzenia ukrywania modałów nie kończą się. Jednak Bootstrap wyzwala zdarzenie, gdy wszystko jest skończone , i możesz się do tego podłączyć w następujący sposób:
Mam nadzieję, że to jest pomocne!
źródło
$('#myModal').removeClass('fade');$(myModal').modal('hide')'
Wstaw przycisk akcji:
i
przykład:
po wprowadzeniu tego atrybutu danych tło .modal nie pojawi się. dokumentacja na ten temat pod tym linkiem: http://getbootstrap.com/javascript/#modals-usage
źródło
data-backdrop="false"
to po prostu opcja informująca bootstrap, aby w ogóle nie używał tła . To nie ma nic wspólnego z rzeczywistym problemem, po prostu go unika. To tak, jakby powiedzieć „nie umiem pływać, więc przestałem wchodzić do basenu”. To fajnie, ale nadal nie możesz pływać, a jeśli twój szef rzuci cię w głęboki koniec, utoniesz. Istnieje wiele przypadków, w których wymagana jest ręczna interwencja, na przykład gdy Angular tupie na DOM w tle Twojej aplikacji.Jeśli używasz kopiowania i wklejania z samej strony getboostrap do selektora generowanego w formacie HTML, pamiętaj o usunięciu komentarza „<! - /.modal ->”. Bootstrap wprawia w zakłopotanie i myśli, że komentarz jest drugim elementem modalnym. Tworzy kolejną kroplę wsteczną dla tego „drugiego” elementu.
źródło
Wiem, że to bardzo stary post, ale to może pomóc. To jest bardzo małe obejście przeze mnie
To wszystko, powinno to rozwiązać problem
źródło
myModal
powinno być I dlaczego miałoby to zamknąć okno dialogowe? Modalne okna dialogowe zamykane są tylko poprzez kliknięcie przycisku zamykania lub kliknięcie poza oknem dialogowym. To nie wydaje się rozwiązaniem.Wystąpił podobny problem: w moim oknie modalnym mam dwa przyciski: „Anuluj” i „OK”. Początkowo oba przyciski zamykały okno modalne, wywołując
$('#myModal').modal('hide')
(z „OK” wcześniej wykonując jakiś kod), a scenariusz wyglądałby następująco:cóż, mój kolega z następnego biurka uratował mi dzień: zamiast wywoływać
$('#myModal').modal('hide')
, nadaj swoim przyciskom atrybutdata-dismiss="modal"
i dodaj zdarzenie „kliknięcie” do przycisku „Prześlij”. W moim problemie kod HTML (no, TWIG) dla przycisku to:aw moim kodzie JavaScript mam:
podczas gdy do przycisku „Anuluj” nie jest przypisane żadne zdarzenie „kliknięcie”. Modal zamyka się teraz poprawnie i pozwala mi ponownie grać na stronie „normalnej”. Wydaje się, że
data-dismiss="modal"
powinien to być jedyny sposób wskazania, że przycisk (lub jakikolwiek element DOM) powinien zamknąć mod Bootstrap..modal('hide')
Metoda wydaje się zachowywać się w sposób nie do końca kontrolowany.Mam nadzieję że to pomoże!
źródło
Ten problem może również wystąpić, jeśli ukryjesz, a następnie ponownie wyświetlisz okno modalne. Zostało to wspomniane w innym miejscu na pytanie, ale poniżej przedstawię więcej szczegółów.
Problem dotyczy synchronizacji i przejścia zanikania. Jeśli pokażesz modal przed zakończeniem przejścia dla poprzedniego modalu, zobaczysz ten uporczywy problem z tłem (modalne tło pozostanie na ekranie, na swój sposób). Bootstrap wyraźnie nie obsługuje wielu modałów jednocześnie, ale wydaje się to stanowić problem, nawet jeśli modal, który ukrywasz i modal, który pokazujesz, są takie same.
Jeśli jest to właściwy powód Twojego problemu, oto kilka opcji jego rozwiązania. Opcja nr 1 to szybki i łatwy test pozwalający ustalić, czy taktowanie przejścia przejściowego jest rzeczywiście przyczyną problemu.
Oto kilka powiązanych postów dotyczących śledzenia problemów z bootstrapem. Możliwe, że jest więcej postów z trackerem niż wymienionych poniżej.
źródło
.modal („ukryj”)
Ręcznie ukrywa modal. Powraca do programu wywołującego przed faktycznym ukryciem modalu (tj. Przed wystąpieniem zdarzenia hidden.bs.modal).
Więc zamiast
robić
Na pewno poczekasz, aż wydarzenie „ukryj” się zakończy.
źródło
Kolejny możliwy błąd, który może powodować ten problem,
Upewnij się, że
bootstrap.js
skrypt nie zawierał więcej niż jeden raz na stronie!źródło
Nawet miałem podobny problem, miałem dwa następujące przyciski
Chciałem wykonać operację ajax i po jej pomyślnym zamknięciu modal. Oto co zrobiłem.
Uruchomiłem zdarzenie kliknięcia przycisku „Nie”, który miał
data-dismiss="modal"
właściwość. I to zadziałało :)źródło
posługiwać się:
Źródło
źródło
To rozwiązanie dotyczy Ruby on Rails 3.x i pliku js.erb, który odbudowuje część DOM, w tym modal. Działa niezależnie od tego, czy wywołanie ajax pochodzi z modalu, czy z innej części strony.
Dzięki @BillHuertas za punkt wyjścia.
źródło
$ („# myModal”). trigger („kliknięcie”);
To zadziałało dla mnie. Nie zamyka się, ponieważ po otwarciu wyskakującego okienka wyzwala 2 lub 3 modalne tła. Więc kiedy wykonasz $ ('# myModal')). Modal ('hide'); wpływa tylko na jedno tło modalne i pozostaje reszta.
źródło
problem z panelem aktualizacji.
Mój problem był spowodowany umieszczeniem panelu aktualizacji. Miałem cały modal w panelu aktualizacji. Jeśli zadeklarujesz modal poza panelem aktualizacji i po prostu powiesz, ciało modalne, w panelu aktualizacji, to $ ('# myModalID'). Modal ('hide'); pracował
źródło
Kolejny punkt widzenia na to pytanie. (Używam bootstrap.js w wersji 3.3.6)
Błędnie zainicjowałem modalność zarówno ręcznie w javascript:
i za pomocą
data-toggle="modal"
w tym przycisku jak przykład poniżej (pokazany w dokumencie)
więc wynikiem jest utworzenie dwóch wystąpień
dołącz do treści mojego html po otwarciu modalu. Może to być przyczyną zamknięcia modułu za pomocą funkcji:
usuwa tylko jedną instancję tła (jak pokazano powyżej), aby tło nie zniknęło. Ale zniknął, jeśli używasz
data-dismiss="modal"
add na HTML jako show w bootstrap doc.Tak więc rozwiązaniem mojego problemu jest ręczne inicjowanie modalu w javascript i nieużywanie atrybutu danych. W ten sposób mogę zarówno zamknąć modal ręcznie, jak i przy użyciu
data-dismiss="modal"
funkcji.Mam nadzieję, że to pomoże, jeśli napotkasz ten sam problem jak ja.
źródło
Do Twojej wiadomości, na wypadek, gdyby ktoś napotkał ten problem ... Spędziłem około 3 godzin, aby odkryć, że najlepszym sposobem na to jest:
Ta funkcja zamykania modułu jest bardzo nieintuicyjna.
źródło
Dodanie
data-dismiss="modal"
przycisków w moim module działało dla mnie. Chciałem, aby mój przycisk wywołał funkcję z kątowym, aby wywołać wywołanie ajax ORAZ zamknąć modal, więc dodałem funkcję.toggle()
wewnątrz i działało to dobrze. (W moim przypadku użyłem abootstrap modal
i użyłem trochęangular
, a nie rzeczywistego kontrolera modalnego).źródło
Miałem ten sam problem. Odkryłem, że było to spowodowane konfliktem między Bootstrap a JQueryUI.
Oba używają klasy „close”. Zmiana klasy w jednym lub drugim rozwiązuje to.
źródło
Użycie przełącznika zamiast ukrywania rozwiązało mój problem
źródło
Upewnij się, że nie używasz tego samego elementu Id / class w innym miejscu, dla elementu niezwiązanego ze składnikiem modalnym.
To znaczy ... jeśli identyfikujesz przyciski, które uruchamiają modalne wyskakujące okienka za pomocą nazwy klasy „myModal”, upewnij się, że nie ma niepowiązanych elementów o tej samej nazwie klasy.
źródło
Po zastosowaniu najwyżej ocenianego rozwiązania miałem problem z tym, że psuje prawidłowe otwieranie przyszłych modałów. Znalazłem moje rozwiązanie, które działa dobrze
źródło
Miałem ten sam problem podczas próby przesłania formularza. Rozwiązaniem było zmienić typ przycisku z
submit
na,button
a następnie obsłużyć zdarzenie kliknięcia przycisku w następujący sposób:źródło
W projekcie .net MVC4 miałem modalne okienko wyskakujące (bootstrap 3.0) wewnątrz Ajax.BeginForm (OnComplete = "addComplete" [usunięty dodatkowy kod]). Wewnątrz javascript „addComplete” miałem następujący kod. To rozwiązało mój problem.
źródło
Miałem ten sam problem.
Jednak korzystałem z bootbox.js, więc mogło to mieć coś wspólnego z tym.
Tak czy inaczej, zdałem sobie sprawę, że przyczyną problemu jest posiadanie elementu o tej samej klasie, co jego rodzic. Gdy jeden z tych elementów jest używany do powiązania funkcji kliknięcia w celu wyświetlenia modalu, pojawia się problem.
to jest przyczyną problemu:
zmień go, aby klikany element nie miał tej samej klasy co element nadrzędny, którykolwiek z jego elementów potomnych lub innych przodków. Prawdopodobnie dobrą praktyką jest robienie tego ogólnie podczas wiązania funkcji kliknięcia.
źródło
Pracuję z Meteorem i mam ten sam problem. Przyczyną mojego błędu było:
Jak widać, dodałem modal w innym, więc kiedy mój modal zaktualizował informacje kontaktowe, if miał inny stan. To spowodowało, że szablon modalny został pominięty z DOM tuż przed jego zamknięciem.
Rozwiązanie: przenieś modal z poza if:
źródło
skrzypce -> https://jsfiddle.net/o6th7t1x/4/
źródło
początkowa wartość atrybutu danych-tło może być
„statyczny”, „prawda”, „fałsz”.
static i true dodają cień modalny, a false wyłącza cień, więc wystarczy zmienić tę wartość przy pierwszym kliknięciu na false. lubię to:
źródło
Miałem problem z modalnym zamrożeniem ekranu tła, ale w nieco innym scenariuszu: kiedy wyświetlały się 2 modale z powrotem na plecy. np. Pierwszy poprosiłby o potwierdzenie zrobienia czegoś, a po kliknięciu przycisku „Potwierdź” akcja napotkałaby błąd, a drugi modal miał zostać wyświetlony w celu wyświetlenia komunikatu o błędzie. Drugie tło modalne zamrozi ekran. Nie było żadnych konfliktów w nazwach klas lub identyfikatorach elementów.
Rozwiązano problem polegający na zapewnieniu przeglądarce wystarczającej ilości czasu na poradzenie sobie z modalnym tłem. Zamiast natychmiast podjąć działanie po kliknięciu przycisku „potwierdź”, daj przeglądarce 500 ms, aby ukrył pierwszy modal i wyczyścił tło itp. - a następnie podejmij działanie, które zakończy się wyświetleniem modalu błędu.
Funkcja _dialogConfirmed () ma następujący kod:
Domyślam się, że inne rozwiązania działały, ponieważ zajęły wystarczająco dużo czasu, dając przeglądarce potrzebny czas czyszczenia.
źródło
W ASP.NET dodaj aktualizację UpdatePanel do kodu po komendzie jquery. Przykład:
źródło