jak całkowicie zniszczyć okno modalne bootstrap?

83

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.

Akki
źródło
2
Czy używasz jQuery lub czegoś podobnego? Mógłby to zrobić $(modal_selector).remove().
robbrit
Dzięki, sprawdzę czy to działa czy nie.
Akki
dzięki, to działa, ale kiedy rev = invoke nie jest wywoływane przez modal.show () .. to jak go ponownie wywołać?
Akki
Tak 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).
robbrit
To zależy od tego, co wyświetlasz w oknie modalnym. Twitter Bootstrap zajmuje się tylko wyświetlaniem modalu, za cokolwiek za tym odpowiadasz.
robbrit

Odpowiedzi:

122

jeśli jest bootstrap 3, możesz użyć:

$("#mimodal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});
user2612497
źródło
8
Jak każda inna odpowiedź, wydaje się, że nie usuwa to tła.
htulipe
1
@htulipe Podejście jest poprawne, ale nie będzie działać z efektami przejścia w trybie modalnym. Będziesz musiał usunąć klasę .fade z modalnej, aby działała.
wiertacz
4
@drillingman: +1, który działał dla mnie:$("#mimodal").removeClass('fade').modal('hide')
John Gietzen
5
Jedyną rzeczą w BS3, która działała dla mnie, to:$(this).html("");
Ryan Currah
1
Jak dokładnie go całkowicie usuwasz? @Loenix
AlexioVay
41

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.

Conar Welsh
źródło
5
To faktycznie działa, ale w nieco inny sposób $("#modalElement").removeData("modal"); Używam Bootstrap 2.3.1 i jQuery 1.9.1
tlavarea
5
Jeśli używasz Bootstrap 3, musisz nasłuchiwać zdarzenia hidden.bs.modalzamiast hidden. getbootstrap.com/javascript/#modals
Romain Paulus
19

Dla 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" );
zelibobla
źródło
Korzystanie z ręcznych kroków jest ryzykowne, ponieważ kod Bootstrap może ulec zmianie, a niektóre aspekty mogą zostać pominięte. Na przykład przynajmniej w Bootstrap 3.2 style="padding-right: 17px;"zostanie ustawiony na bodyró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);.
Oliver
Tak, masz rację. Zostało to napisane dla wersji 2.x. Zaktualizowano.
zelibobla
jeśli dynamicznie wprowadzasz dane do modalu i usuniesz całą drugą część odpowiedzi, usunie to znacznie więcej niż potrzeba. Poza punktem ponownego wykorzystania modalności. Jeśli to pomoże, sugeruję użycie Twojej konkretnej class.remove ();
alphapilgrim
13

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ć.

Arjun
źródło
.remove () usuwa go całkowicie. A .show () już nie działa. Co mam ponownie zainicjować?
geeky_monster
Ponieważ tworzenie trybu bootstrapowego, wprowadzenie zmian w bodysugerowanym rozwiązaniu nie spowoduje cofnięcia wszystkich zmian.
zelibobla
2
To nie zadziała, ponieważ tło utknie, dlaczego w ogóle zostało przyjęte?
codenamezero
5

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
Pozostawia to również szare tło, uniemożliwiając korzystanie ze strony internetowej!
Biju,
4

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('');
});
John In't Hout
źródło
3

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">&times</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})
Robert Hoffmann
źródło
3

bootstrap 3 + jquery 2.0.3:

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})
user2813480
źródło
1
Ponieważ tworzenie trybu bootstrapowego, wprowadzenie zmian w bodysugerowanym rozwiązaniu nie spowoduje wycofania wszystkich zmian.
zelibobla
3

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", "");
});
Saeid
źródło
to był ten, który mi pomógł;) więc nie potrzebowałem api, żeby go zatrzymać
Alexa Adrian
2

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.

Sherbrow
źródło
2

To jest moje rozwiązanie:

this.$el.modal().off();

Daniel Ortegón
źródło
1

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();
    }
});
Vikalp Veer
źródło
1
$('#myModal').on('hidden.bs.modal', function () {
      $(this).data('bs.modal', null).remove();
});

//Just add .remove(); 
//Bootstrap v3.0.3
Luca Di Lenardo
źródło
Chociaż ten kod może w rzeczywistości być rozwiązaniem problemu, ogólnie dobrym pomysłem jest dołączenie wyjaśnienia, co robi, gdy odpowiadasz na pytanie.
Sebastian Lenartowicz
Dobrze. Spieszyłem się ... w każdym razie dodaj ".remove ();" aby usunąć wszystkie odniesienia i kod html modalu bootstrap.
Luca Di Lenardo
1

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();

});
Alin Razvan
źródło
Czy po tym modal może zostać ponownie zainicjowany?
rahim.nagori
@ rahim.nagori tak jak pisze w opisie to kasowanie modala z DOM, można go ponownie dodać ... nie zamyka modala, kasuje go, wątek dotyczy całkowitego zniszczenia okna modalnego.
Alin Razvan
1

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.

dijoe
źródło
1
Pozostawia to również szare tło, uniemożliwiając korzystanie ze strony internetowej!
Biju,
1

Działa również na bootstrap 4.x

$('#modal_ID').modal( 'hide' ).data( 'bs.modal', null );
Cristian Ghirba
źródło
Spowoduje to usunięcie modalu, ale pozostawi szare tło, co sprawia, że ​​strona internetowa jest bezużyteczna
Biju,
W której wersji bootstrap to wypróbowałeś?
Cristian Ghirba
0

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();
    }
});
Akshay
źródło
1
Live jest przestarzałe, należy je zastąpić włączonym, a [0] na elemencie, na który celujesz, nie jest konieczne, jeśli używasz jQuery. Ponadto, jeśli całkowicie usuniesz tło, pamiętaj, że może być konieczne dodanie go z powrotem ... Spróbuj: $(document).on('hidden.bs.modal', '.modal', function(e) { if ($('.modal-backdrop').length) { $('.modal-backdrop').remove(); } });
Thomas Bennett
0

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.

guy_fawkes
źródło
0

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.

Rob Y
źródło
0

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();
});
Maksym Kalin
źródło
0

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

Amir
źródło
Pozostawia to również szare tło, uniemożliwiając korzystanie ze strony internetowej!
Biju,
0

Całkowite usuwanie w jednej linii ze skóry (ES6)

$("#myModal").on('hidden.bs.modal', (e)=>e.currentTarget.remove());

Dieter Gribnitz
źródło
-1

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
});
Bill Milagro
źródło
-4

Nie wiem, jak to może brzmieć, ale to działa dla mnie ...........

$("#YourModalID").modal('hide');
Samson Iyanda
źródło
Głos w dół, ponieważ po prostu ukrywa modalne, o co wyraźnie nie pytano.
AlexioVay,