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.
$(modal_selector).remove()
.remove
, das Modal wird wirklich gelöscht, sodass es nicht wieder geöffnet werden kann. Die modalen Fenster von Twitter Bootstrap sind nicht wirklich magisch. Wenn Sie also einen modalen Dialog erneut öffnen, müssen Sie alle Formularelemente manuell zurücksetzen (das war meine Erfahrung).Antworten:
Wenn es sich um Bootstrap 3 handelt, können Sie Folgendes verwenden:
quelle
$("#mimodal").removeClass('fade').modal('hide')
$(this).html("");
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:
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:
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.
quelle
$("#modalElement").removeData("modal");
und Weise. Ich verwende Bootstrap 2.3.1 und jQuery 1.9.1hidden.bs.modal
anstelle deshidden
Ereignisses abhören . getbootstrap.com/javascript/#modalsFür die 3.x Version
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.
quelle
style="padding-right: 17px;"
auch auf gesetzt, um die ausgeblendetebody
Bildlaufleiste zu berücksichtigen. Fazit: Verwenden Sie die Bootstraps-API, die in Version 3 verfügbar wäre$('.modal').modal('hide').data('bs.modal', null);
.Auf diese Weise können Sie ein Modal vollständig zerstören, ohne die Seite neu zu laden.
Modal wird jedoch vollständig von Ihrer HTML-Seite entfernt. Nach diesem modalen Ausblenden funktioniert die Show nicht mehr.
quelle
body
vorgeschlagenen Lösung vorgenommen werden, werden nicht alle Änderungen rückgängig gemacht.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:quelle
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.
Das funktioniert auf meiner Seite einwandfrei. BS Version> 3
quelle
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?
Wenn Sie es als dynamische Vorlage verwenden möchten, machen Sie einfach so etwas
quelle
Wenn Sie einen Iframe in Ihrem Modal haben, können Sie dessen Inhalt mit dem folgenden Code entfernen:
quelle
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)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.
quelle
Bootstrap 3 + jquery 2.0.3:
quelle
body
vorgeschlagenen Lösung vorgenommen werden, werden nicht alle Änderungen rückgängig gemacht.Das ist meine Lösung:
this.$el.modal().off();
quelle
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.
quelle
quelle
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.
quelle
Ich muss das Modal direkt nach dem Schließen durch einen Knopfdruck zerstören und habe mir folgendes ausgedacht.
Beachten Sie, dass dies mit Bootstrap 3 funktioniert.
quelle
Funktioniert auch mit Bootstrap 4.x.
quelle
Wenn der Modalschatten dunkler bleibt und nicht mehr als ein Modal angezeigt wird, ist dies hilfreich
quelle
$(document).on('hidden.bs.modal', '.modal', function(e) { if ($('.modal-backdrop').length) { $('.modal-backdrop').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.
quelle
Das hat bei mir funktioniert.
Der Dialog und der Hintergrund verschwanden, aber sie kamen zurück, wenn ich das nächste Mal auf die Schaltfläche klickte.
quelle
Es funktioniert für Bootstrap v3.3.6
quelle
nur das hat bei mir funktioniert
Es ist sicher, Selektoren zu zwingen, sie leer zu machen, da die Bootstrap- und JQuery-Version der Grund für dieses Problem sein kann
quelle
Einzeilige vollständige Entfernung auf Fell (ES6)
$("#myModal").on('hidden.bs.modal', (e)=>e.currentTarget.remove());
quelle
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.
quelle
Ich weiß nicht, wie das klingen mag, aber das funktioniert für mich ...........
quelle