Ich habe das modale Fenster für eine Assistentenimplementierung verwendet, die ungefähr 4,5 Schritte umfasst. Ich muss es nach dem letzten Schritt (onFinish) und dem OnCancel-Schritt vollständig zerstören, ohne dass eine Seitenaktualisierung erforderlich ist . Ich kann es natürlich ausblenden, aber das Ausblenden von modalen Fenstern stellt alles als solches wieder her, wenn ich es wieder öffne. Könnte mir jemand in dieser Angelegenheit helfen?

Danke Alle Hinweise Antworten sind hilfreich für mich.

Wenn es sich um Bootstrap 3 handelt, können Sie Folgendes verwenden:

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

HINWEIS: Diese Lösung funktioniert nur für Bootstrap vor Version 3. Eine Antwort auf Bootstrap 3 finden Sie in dieser Antwort von user2612497 .

Was Sie tun möchten, ist:

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

Dadurch wird das Modal jedes Mal initialisiert, wenn es angezeigt wird. Wenn Sie also Remote-Inhalte zum Laden in das div oder was auch immer verwenden, wird es bei jedem Öffnen erneut ausgeführt. Sie zerstören lediglich die modale Instanz nach jedem Ausblenden.

Oder wann immer Sie die Zerstörung des Elements auslösen möchten (falls dies nicht jedes Mal geschieht, wenn Sie es ausblenden), müssen Sie nur die mittlere Zeile aufrufen:

$('#modalElement').data('modal', null);

Der Twitter-Bootstrap sucht nach seiner Instanz im Datenattribut. Wenn eine Instanz vorhanden ist, wird sie nur umgeschaltet. Wenn eine Instanz nicht vorhanden ist, wird eine neue erstellt.

Hoffentlich hilft das.

Für die 3.x Version

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

Für die 2.x-Version (riskant; lesen Sie die Kommentare unten) Wenn Sie Bootstrap-Modal erstellen, werden drei Elemente auf Ihrer Seite geändert. Wenn Sie also alle Änderungen vollständig rückgängig machen möchten, müssen Sie dies für jede Änderung manuell tun.

$( '.modal' ).remove();
$( '.modal-backdrop' ).remove();
$( 'body' ).removeClass( "modal-open" );

Auf diese Weise können Sie ein Modal vollständig zerstören, ohne die Seite neu zu laden.

$("#modal").remove();
$('.modal-backdrop').remove();

Modal wird jedoch vollständig von Ihrer HTML-Seite entfernt. Nach diesem modalen Ausblenden funktioniert die Show nicht mehr.

Die Kraft von jQuery. $(selector).modal('hide').destroy();Wenn Sie zuerst den Gleit-Effekt entfernen, wird das Element möglicherweise vollständig entfernt. Wenn Sie jedoch möchten, dass der Benutzer das Modal nach Abschluss der Schritte wieder öffnen kann. Möglicherweise möchten Sie nur die Einstellungen aktualisieren, die Sie zurückgesetzt haben möchten. Wenn Sie also alle Eingaben in Ihrem Modal zurücksetzen möchten, sieht dies folgendermaßen aus:

$(selector).find('input, textarea').each(function(){
   $(this).val('');
});

Ich habe versucht, eine akzeptierte Antwort zu finden, aber es scheint nicht an meinem Ende zu funktionieren, und ich weiß nicht, wie die akzeptierte Antwort funktionieren soll.

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

Das funktioniert auf meiner Seite einwandfrei. BS Version> 3

Soweit ich weiß, willst du es nicht entfernen oder verstecken? Weil Sie es vielleicht später wiederverwenden möchten. Aber möchten Sie nicht, dass es den alten Inhalt hat, wenn Sie es jemals wieder öffnen?

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

Wenn Sie es als dynamische Vorlage verwenden möchten, machen Sie einfach so etwas

$(selector).modal({show: true})

....

$(selector).modal({show: false})
$(".modal-body").empty()

....

$(".modal-body").append("new stuff & text")
$(selector).modal({show: true})

Wenn Sie einen Iframe in Ihrem Modal haben, können Sie dessen Inhalt mit dem folgenden Code entfernen:

$('#myModal').on('hidden.bs.modal', function(){
   $(this).find('iframe').html("");
   $(this).find('iframe').attr("src", "");
});

Mein Ansatz wäre, die clone()Methode von jQuery zu verwenden. Es erstellt eine Kopie Ihres Elements, und genau das möchten Sie: eine Kopie Ihres ersten unveränderten Modals, das Sie auf Wunsch ersetzen können: 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);
});

Das Markup, das ich verwendet habe, ist das grundlegendste. Sie müssen also nur die richtigen Elemente / Ereignisse binden, und Ihr Assistent sollte zurückgesetzt werden.

Achten Sie darauf , dass Sie sich an delegierte Ereignisse binden oder bei jedem Zurücksetzen die inneren Elemente Ihres Modals neu binden , damit sich jedes neue Modal gleich verhält.

Bootstrap 3 + jquery 2.0.3:

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

Das ist meine Lösung:

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

Ich hatte das gleiche Szenario, in dem ich auf Knopfdruck ein neues Modal öffnete. Sobald dies erledigt ist, möchte ich es vollständig von meiner Seite entfernen ... Ich verwende remove, um das Modal zu löschen. Beim Klicken auf die Schaltfläche würde ich prüfen, ob das Modal vorhanden ist, und wenn dies zutrifft, würde ich es zerstören und ein neues Modal erstellen.

$("#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

Dadurch wird das Modal vollständig aus dem DOM entfernt und funktioniert auch für die "angehängten" Modalitäten.

#pickoptionmodal ist die ID meines Modalfensters.

$(document).on('hidden.bs.modal','#pickoptionmodal',function(e){

e.preventDefault();

$("#pickoptionmodal").remove();

});

Ich muss das Modal direkt nach dem Schließen durch einen Knopfdruck zerstören und habe mir folgendes ausgedacht.

$("#closeModal").click(function() {
    $("#modal").modal('hide').on('hidden.bs.modal', function () {
        $("#modal").remove();
    });
});

Beachten Sie, dass dies mit Bootstrap 3 funktioniert.

Funktioniert auch mit Bootstrap 4.x.

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

Wenn der Modalschatten dunkler bleibt und nicht mehr als ein Modal angezeigt wird, ist dies hilfreich

$('.modal').live('hide',function(){
    if($('.modal-backdrop').length>1){
        $('.modal-backdrop')[0].remove();
    }
});

Ich musste dasselbe Modal für verschiedene Linkklicks verwenden. Ich habe gerade den HTML-Inhalt durch ein leeres "" des Modals in einem versteckten Rückruf ersetzt.

Das hat bei mir funktioniert.

$('.modal-backdrop').removeClass('in');
$('#myDiv').removeClass('in');

Der Dialog und der Hintergrund verschwanden, aber sie kamen zurück, wenn ich das nächste Mal auf die Schaltfläche klickte.

Es funktioniert für Bootstrap v3.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();
});

nur das hat bei mir funktioniert

$('body').on('hidden.bs.modal', '.modal', function() {
    $('selector').val('');
});

Es ist sicher, Selektoren zu zwingen, sie leer zu machen, da die Bootstrap- und JQuery-Version der Grund für dieses Problem sein kann

Einzeilige vollständige Entfernung auf Fell (ES6)

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

Mit UI-Router kann dies eine Option für Sie sein. Der Controller wird beim Schließen neu geladen, sodass der modale Inhalt neu initialisiert wird, bevor er das nächste Mal ausgelöst wird.

$("#myModalId").on('hidden.bs.modal', function () {
  $state.reload();  //resets the modal
});

Ich weiß nicht, wie das klingen mag, aber das funktioniert für mich ...........

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