Użyłem okna modalnego do implementacji kreatora, która ma około 4,5 kroków. Muszę go całkowicie zniszczyć po ostatnim kroku (onFinish) i OnCancel bez odświeżania strony . Mogę to oczywiście ukryć, ale ukrycie okien modalnych przywraca wszystko jako takie, gdy ponownie je otworzę. Czy ktoś mógłby mi pomóc w tej sprawie?
Dzięki Wszelkie podpowiedzi i odpowiedzi są dla mnie pomocne.
$(modal_selector).remove()
.remove
, naprawdę usunie modal, więc nie można go ponownie otworzyć. Okna modalne Twittera Bootstrap nie są tak naprawdę niczym magicznym, więc po ponownym otwarciu okna modalnego musisz ręcznie zresetować wszystkie elementy formularza (takie było moje doświadczenie).Odpowiedzi:
jeśli jest bootstrap 3, możesz użyć:
$("#mimodal").on('hidden.bs.modal', function () { $(this).data('bs.modal', null); });
źródło
$("#mimodal").removeClass('fade').modal('hide')
$(this).html("");
UWAGA: To rozwiązanie działa tylko z Bootstrapem przed wersją 3. Aby uzyskać odpowiedź Bootstrap 3, zapoznaj się z odpowiedzią użytkownika 2612497 .
To, co chcesz zrobić, to:
$('#modalElement').on('hidden', function(){ $(this).data('modal', null); });
spowoduje to, że modal zainicjuje się za każdym razem, gdy zostanie wyświetlony. Więc jeśli używasz zdalnej zawartości do załadowania do div lub czegokolwiek innego, zrobi to ponownie za każdym razem, gdy zostanie otwarty. Po prostu niszczysz instancję modalną po każdym jej ukryciu.
Lub gdy chcesz wywołać zniszczenie elementu (w przypadku, gdy nie dzieje się tak za każdym razem, gdy go ukrywasz), wystarczy wywołać środkową linię:
$('#modalElement').data('modal', null);
Program ładujący Twittera szuka swojej instancji w atrybucie danych, jeśli instancja istnieje, po prostu ją przełącza, a jeśli instancja nie istnieje, utworzy nową.
Mam nadzieję, że to pomoże.
źródło
$("#modalElement").removeData("modal");
Używam Bootstrap 2.3.1 i jQuery 1.9.1hidden.bs.modal
zamiasthidden
. getbootstrap.com/javascript/#modalsDla wersji 3.x.
$( '.modal' ).modal( 'hide' ).data( 'bs.modal', null );
Dla wersji 2.x (ryzykowne; przeczytaj komentarze poniżej) Podczas tworzenia modalnego bootstrapu zmieniane są trzy elementy strony. Jeśli więc chcesz całkowicie cofnąć wszystkie zmiany, musisz to zrobić ręcznie dla każdej z nich.
$( '.modal' ).remove(); $( '.modal-backdrop' ).remove(); $( 'body' ).removeClass( "modal-open" );
źródło
style="padding-right: 17px;"
zostanie ustawiony nabody
również, aby uwzględnić ukryty pasek przewijania. Podsumowując: użyj API Bootstraps, które w wersji 3 byłoby$('.modal').modal('hide').data('bs.modal', null);
.W ten sposób możesz całkowicie zniszczyć modal bez ponownego ładowania strony.
$("#modal").remove(); $('.modal-backdrop').remove();
ale całkowicie usunie modal z twojej strony HTML. Po tym modalnym pokazie ukrycia nie będzie działać.
źródło
body
sugerowanym rozwiązaniu nie spowoduje cofnięcia wszystkich zmian.Próbowałem zaakceptować odpowiedź, ale wydaje mi się, że nie działa z mojej strony i nie wiem, jak przyjęta odpowiedź ma działać.
$('#modalId').on('hidden.bs.modal', function () { $(this).remove(); })
Po mojej stronie to działa doskonale. Wersja BS> 3
źródło
Siła jQuery.
$(selector).modal('hide').destroy();
najpierw usunie sinds, które możesz mieć efekt przesuwania, a następnie całkowicie usunie element, jednak jeśli chcesz, aby użytkownik mógł ponownie otworzyć modal po zakończeniu kroków. możesz po prostu zaktualizować tylko te ustawienia, które chcesz zresetować, więc aby zresetować wszystkie wejścia w twoim modalu, wyglądałoby to następująco:$(selector).find('input, textarea').each(function(){ $(this).val(''); });
źródło
Z tego, co rozumiem, nie chcesz go usuwać ani ukrywać? Ponieważ możesz zechcieć użyć go później ... ale nie chcesz, aby zawierał starą zawartość, jeśli kiedykolwiek ponownie ją otworzysz?
<div class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <a href="#" class="btn">Close</a> <a href="#" class="btn btn-primary">Save changes</a> </div> </div>
Jeśli chcesz użyć go jako dynamicznego szablonu, po prostu zrób coś takiego
$(selector).modal({show: true}) .... $(selector).modal({show: false}) $(".modal-body").empty() .... $(".modal-body").append("new stuff & text") $(selector).modal({show: true})
źródło
bootstrap 3 + jquery 2.0.3:
$('#myModal').on('hide.bs.modal', function () { $('#myModal').removeData(); })
źródło
body
sugerowanym rozwiązaniu nie spowoduje wycofania wszystkich zmian.Jeśli masz element iframe w swoim modalu, możesz usunąć jego zawartość za pomocą następującego kodu:
$('#myModal').on('hidden.bs.modal', function(){ $(this).find('iframe').html(""); $(this).find('iframe').attr("src", ""); });
źródło
Moje podejście polegałoby na wykorzystaniu
clone()
metody jQuery. Tworzy kopię Twojego elementu i właśnie tego chcesz: kopię Twojego pierwszego niezmienionego modalu, który możesz zastąpić na życzenie: Demo (jsfiddle)var myBackup = $('#myModal').clone(); // Delegated events because we make a copy, and the copied button does not exist onDomReady $('body').on('click','#myReset',function() { $('#myModal').modal('hide').remove(); var myClone = myBackup.clone(); $('body').append(myClone); });
Znaczniki, których użyłem, są najbardziej podstawowe, więc wystarczy powiązać odpowiednie elementy / zdarzenia i zresetować kreatora.
Uważaj na powiązanie z delegowanymi zdarzeniami lub ponowne wiązanie przy każdym resetowaniu wewnętrznych elementów modalu, aby każdy nowy modal zachowywał się w ten sam sposób.
źródło
To jest moje rozwiązanie:
this.$el.modal().off();
źródło
Miałem taki sam scenariusz, w którym otwierałem nowy modal po kliknięciu przycisku. Po zakończeniu chcę całkowicie usunąć go z mojej strony ... Używam Usuń, aby usunąć modal. Po kliknięciu przycisku sprawdzę, czy modal istnieje, a jeśli tak, zniszczę go i utworzę nowy modal.
$("#wizard").click(function() { /* find if wizard is already open */ if($('.wizard-modal').length) { $('.wizard-modal').remove(); } });
źródło
$('#myModal').on('hidden.bs.modal', function () { $(this).data('bs.modal', null).remove(); }); //Just add .remove(); //Bootstrap v3.0.3
źródło
To całkowicie usuwa modal z DOM, działa również dla "dołączonych" modali.
#pickoptionmodal to identyfikator mojego okna modalnego.
$(document).on('hidden.bs.modal','#pickoptionmodal',function(e){ e.preventDefault(); $("#pickoptionmodal").remove(); });
źródło
Muszę zniszczyć modal zaraz po jego zamknięciu za pomocą kliknięcia przycisku, więc wymyśliłem co następuje.
$("#closeModal").click(function() { $("#modal").modal('hide').on('hidden.bs.modal', function () { $("#modal").remove(); }); });
Zauważ, że działa to z Bootstrap 3.
źródło
Działa również na bootstrap 4.x
$('#modal_ID').modal( 'hide' ).data( 'bs.modal', null );
źródło
Jeśli cień modalny pozostaje ciemniejszy i nie wyświetla więcej niż jednego modalu, będzie to pomocne
$('.modal').live('hide',function(){ if($('.modal-backdrop').length>1){ $('.modal-backdrop')[0].remove(); } });
źródło
$(document).on('hidden.bs.modal', '.modal', function(e) { if ($('.modal-backdrop').length) { $('.modal-backdrop').remove(); } });
Musiałem użyć tego samego modalu dla różnych kliknięć linków. Właśnie zastąpiłem zawartość html pustym elementem modalnym w ukrytym wywołaniu zwrotnym.
źródło
To zadziałało dla mnie.
$('.modal-backdrop').removeClass('in'); $('#myDiv').removeClass('in');
Okno dialogowe i tło zniknęły, ale powróciły po następnym kliknięciu przycisku.
źródło
Działa z Bootstrap w wersji 3.3.6
$('#dialog').modal() .on('hide.bs.modal', function () { // Some Code }).on('shown.bs.modal', function () { // Some Code }).on('hidden.bs.modal', function () { $("#dialog").off(); });
źródło
tylko to działało dla mnie
$('body').on('hidden.bs.modal', '.modal', function() { $('selector').val(''); });
Można bezpiecznie wymusić na selektorach pozostawienie ich pustych, ponieważ przyczyną tego problemu mogą być wersje bootstrap i jquery
źródło
Całkowite usuwanie w jednej linii ze skóry (ES6)
$("#myModal").on('hidden.bs.modal', (e)=>e.currentTarget.remove());
źródło
W przypadku routera ui może to być opcja dla Ciebie. Ponownie ładuje kontroler po zamknięciu, więc ponownie inicjuje zawartość modalną przed następnym uruchomieniem.
$("#myModalId").on('hidden.bs.modal', function () { $state.reload(); //resets the modal });
źródło
Nie wiem, jak to może brzmieć, ale to działa dla mnie ...........
$("#YourModalID").modal('hide');
źródło