Przeczytałem tutaj posty, stronę Bootstrap i Googled jak szalony - ale nie mogę znaleźć na pewno łatwej odpowiedzi ...
Mam modal Bootstrap, który otwieram z pomocnika link_to w następujący sposób:
<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %>
W mojej ContactsController.create
akcji mam kod, który tworzy, Contact
a następnie przekazuje do create.js.erb
. W create.js.erb
, mam trochę kodu obsługi błędów (mieszanka ruby i javascript). Jeśli wszystko pójdzie dobrze, chcę zamknąć modal.
To tutaj mam problemy. Nie mogę odrzucić modalu, kiedy wszystko idzie dobrze.
Próbowałem $('#myModal').modal('hide');
i to nie ma wpływu. Próbowałem również, $('#myModal').hide();
co powoduje, że modal odrzuca, ale pozostawia tło.
Wszelkie wskazówki, jak zamknąć modal i / lub odrzucić tło od wewnątrz create.js.erb
?
Edytować
Oto znacznik dla myModal:
<div class="modal hide" id="myModal" >
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add Contact</h3>
<div id="errors_notification">
</div>
</div>
<div class="modal-body">
<%= form_for :contact, url: contacts_path, remote: true do |f| %>
<%= f.text_field :first_name, placeholder: "first name" %>
<%= f.text_field :last_name, placeholder: "last name" %>
<br>
<%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
<a class="close btn" data-dismiss="modal">Cancel</a>
<% end %>
</div>
<div class="modal-footer">
</div>
</div>
źródło
$('#myModal').modal('hide');
jest poprawną składnią do zamykania / ukrywania modalu o idmyModal
(możesz to przetestować na stronie dokumentacji Bootstrap ). Czy na pewno masz element o tym identyfikatorze na swojej stronie? Co również próbujesz osiągnąć dzięki temu połączeniu? Twoja obecna implementacja wykonuje żądanie Ajaxnew_contact_path
i jednocześnie otwiera modal z zawartością#myModal
- czy tego właśnie chcesz?myModal
. Spróbowałem ponownie$('myModal').modal('hide')
i nadal nie jestem dobry. HM Pod względem tego, co próbuję osiągnąć, myślę, że użycie pomocnika link_to mogło być niepoprawne. Zastąpiłem to:<a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>
ponieważ tak naprawdę nie potrzebuję dzwonić donew_contact_path
. Chcę tylko, aby modal się otworzył, a następnie zajął się wprowadzaniem przez użytkownika. Dzięki za poświęcenie czasu na odpowiedź. Zobaczę, czy nie mogę tego rozwiązać.$('#myModal').modal('hide');
(#
brakuje komentarza).$('#myModal').modal('hide')
. JOdpowiedzi:
Gdy modal jest otwarty w oknie przeglądarki, użyj konsoli przeglądarki, aby spróbować
Jeśli to działa (a modal zamyka się), to wiesz, że twój zamknięty Javascript nie jest poprawnie wysyłany z serwera do przeglądarki.
Jeśli to nie działa, musisz dokładniej zbadać, co się dzieje. Np. Upewnij się, że nie ma dwóch elementów o tym samym identyfikatorze. Np. Czy działa po raz pierwszy po załadowaniu strony, ale nie po raz drugi?
Konsola przeglądarki: firebug dla Firefoxa, konsola debugująca dla Chrome lub Safari itp.
źródło
aby zamknąć modal bootstrap , możesz przekazać „hide” 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ć ukrytego. 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 przycisku zamknięcia i naciśnij przycisk zamknięcia.
źródło
Używam Bootstrap 3.4 Dla mnie to nie działa
$('#myModal').modal('hide')
W desperacji zrobiłem to:
Może nie jest elegancki, ale działa
źródło
Najlepsza forma do ukrywania i pokazywania modalu za pomocą bootstrapu
źródło
Wystąpił ten sam błąd i ten wiersz kodu naprawdę mi pomaga.
źródło
źródło
Znalazłem prawidłowe rozwiązanie, w którym możesz użyć tego kodu
źródło
Natknąłem się na coś, co moim zdaniem było podobne.
$('#myModal').modal('hide');
Prawdopodobnie uruchomiony przez tą funkcją i uderza linięProblem polega na tym, że wartość isShown może być niezdefiniowana, nawet jeśli wyświetlany jest modal, a wartość powinna być prawdziwa. Zmodyfikowałem nieco kod ładowania początkowego do następującego
Wydawało się, że to w większości rozwiązało problem. Jeśli tło nadal pozostaje, zawsze możesz dodać połączenie, aby ręcznie usunąć je po połączeniu ukrytym
$('.modal-backdrop').remove();
. Wcale nie jest idealny, ale działa.źródło
(W odniesieniu do Bootstrap 3), w celu ukrycia modalnej użycie:
$('#modal').modal('hide')
. Ale powodem, dla którego tło pozostało (dla mnie) było to, że niszczę DOM dla modalu, zanim zakończyło się „ukrywanie”.Aby rozwiązać ten problem, powiązałem ukryte zdarzenie z usunięciem DOM. W moim przypadku:
this.render()
źródło
this.render()
jego wyświetlaniuundefined is not a function
w mojej chromowanej konsoli.Miałem więcej szczęścia, wykonując połączenie po wystąpieniu „pokazanego” oddzwaniania:
Zapewniło to załadowanie modalu przed wykonaniem wywołania hide ().
źródło
Odkryliśmy, że między wywołaniem naszego kodu serwera a powrotem do udanego połączenia zwrotnego było tylko niewielkie opóźnienie. Jeśli zapakowaliśmy wywołanie do serwera w
$("#myModal").on('hidden.bs.modal', function (e)
module obsługi, a następnie wywołaliśmy$("#myModal").modal("hide");
metodę, przeglądarka ukryłaby modal, a następnie wywołała kod po stronie serwera.Znowu nie elegancki, ale funkcjonalny.
Jak widać,
myFunc
wywołanie spowoduje ukrycie modalu, a następnie wywołanie kodu po stronie serwera.źródło
Miałem ten sam problem i po kilku eksperymentach znalazłem rozwiązanie. W moim module obsługi kliknięć musiałem zatrzymać wyświetlanie zdarzenia, takie jak:
źródło
Oto dokument: http://getbootstrap.com/javascript/#modals-methods
Oto metoda: $ ('# myModal'). Modal ('hide')
Jeśli chcesz otworzyć kilka razy modal z inną zawartością, proponuję dodać (w tobie główne js):
Więc wyczyścisz zawartość do następnego otwarcia i unikniesz pewnego rodzaju buforowania
źródło
źródło
Nawet ja mam takie same problemy. To bardzo mi pomogło
źródło
Użyłem tego prostego kodu:
źródło
$('#modal').modal('hide');
i jego warianty nie działały dla mnie, chyba że miałemdata-dismiss="modal"
jako atrybut przycisk Anuluj. Tak jak ty, moje potrzeby były możliwe do zamknięcia / ewentualnie zamknięcia w oparciu o jakąś dodatkową logikę, więc kliknięcie linku zdata-dismiss="modal"
bezpośrednim nie wystarczy. Skończyło się na tym,data-dismiss="modal"
że mam ukryty przycisk, z którego mógłbym programowo wywołać moduł obsługi kliknięć, więca następnie w modułach obsługi kliknięć, aby anulować, gdy musisz zamknąć modal, jaki możesz mieć
źródło
Musimy zadbać o bulgotanie zdarzeń. Musisz dodać jeden wiersz kodu
źródło
Zdaję sobie sprawę, że to stare pytanie, ale stwierdziłem, że żadne z nich nie było dokładnie tym, czego dokładnie szukałem. Wydaje się, że jest to spowodowane próbą zamknięcia modalu przed jego zakończeniem.
Moje rozwiązanie opierało się na odpowiedzi @ schoonie23, ale musiałem zmienić kilka rzeczy.
Najpierw zadeklarowałem zmienną globalną na początku mojego skryptu:
Następnie w moim kodzie modalnym:
Następnie: (Zwróć uwagę na nazwę „pokazano.bs.modal” wskazującą, że modal pokazał się całkowicie w przeciwieństwie do „show”, który uruchamia się po wywołaniu zdarzenia show. (Początkowo próbowałem po prostu „pokazano”, ale to nie zadziałało. )
Mam nadzieję, że to kiedyś uratuje komuś dodatkowe badania. Zanim to wymyśliłem, trochę szukałem rozwiązania.
źródło
Użyłem tego kodu -
Ukryj modal z płynnym efektem za pomocą Fade Out.
źródło
Jeśli używasz klasy zamkniętej w swoich modach, następujące będą działać. W zależności od przypadku użycia, ogólnie polecam filtrowanie tylko do widocznego modalu, jeśli istnieje więcej niż jeden modal z klasą zamkniętą.
źródło
document.getElementById ('closeButton'). click (); // dodaj atrybut data-dismiss = "modal" do elementu w module i nadaj mu ten identyfikator
źródło
Jest to zła praktyka, ale możesz użyć tej techniki do zamknięcia modalu, wywołując przycisk zamykania w javascript. Spowoduje to zamknięcie modalu po 3 sekundach.
źródło
można to zrobić tylko w HTML:
źródło