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.

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

$("#mimodal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});

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.

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

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

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

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

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})

bootstrap 3 + jquery 2.0.3:

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})

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", "");
});

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.

To jest moje rozwiązanie:

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

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

$('#myModal').on('hidden.bs.modal', function () {
      $(this).data('bs.modal', null).remove();
});

//Just add .remove(); 
//Bootstrap v3.0.3

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

});

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.

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

$('#modal_ID').modal( 'hide' ).data( 'bs.modal', null );

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

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.

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.

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

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

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

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

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

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

$("#YourModalID").modal('hide');