Wie kann man das modale Bootstrap-Fenster vollständig zerstören?

83

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.

Akki
quelle
2
Verwenden Sie jQuery oder ähnliches? Könnte in der Lage sein zu tun $(modal_selector).remove().
Robbrit
Danke, lassen Sie mich überprüfen, ob es funktioniert oder nicht.
Akki
danke, es funktioniert, aber wenn wir rev = invoke verwenden, wird es nicht von modal.show () aufgerufen. Wie kann man es dann erneut aufrufen?
Akki
Ja 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).
Robbrit
Dies hängt davon ab, was Sie im Modal anzeigen. Twitter Bootstrap übernimmt nur die Anzeige des Modals, was auch immer darin liegt, liegt in Ihrer Verantwortung.
Robbrit

Antworten:

119

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

$("#mimodal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});
user2612497
quelle
7
Wie jede andere Antwort scheint dies den Hintergrund nicht zu entfernen.
htulipe
1
@htulipe Der Ansatz ist richtig, funktioniert jedoch nicht mit Übergangseffekten auf das Modal. Sie müssen die .fade-Klasse aus dem Modal entfernen, damit sie funktioniert.
drillingman
3
@ Drillingman: +1, die für mich funktioniert hat:$("#mimodal").removeClass('fade').modal('hide')
John Gietzen
5
Das einzige, was in BS3 für mich funktioniert hat, war:$(this).html("");
Ryan Currah
1
Wie genau löschen Sie es vollständig? @Loenix
AlexioVay
40

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.

Conar Welsh
quelle
5
Dies funktioniert jedoch tatsächlich auf eine etwas andere Art $("#modalElement").removeData("modal"); und Weise. Ich verwende Bootstrap 2.3.1 und jQuery 1.9.1
Tlavarea
5
Wenn Sie Bootstrap 3 verwenden, müssen Sie das hidden.bs.modalanstelle des hiddenEreignisses abhören . getbootstrap.com/javascript/#modals
Romain Paulus
19

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" );
Zelibobla
quelle
Die Verwendung manueller Schritte ist ein riskanter Ansatz, da der Bootstrap-Code möglicherweise geändert wird und Sie dann möglicherweise einige Aspekte übersehen. Zum Beispiel wird zumindest in Bootstrap 3.2 style="padding-right: 17px;"auch auf gesetzt, um die ausgeblendete bodyBildlaufleiste zu berücksichtigen. Fazit: Verwenden Sie die Bootstraps-API, die in Version 3 verfügbar wäre $('.modal').modal('hide').data('bs.modal', null);.
Oliver
Ja, du hast recht. Dies wurde für die 2.x-Version geschrieben. Aktualisiert.
Zelibobla
Wenn Sie Daten dynamisch in Modal einspeisen und den gesamten zweiten Teil Ihrer Antwort entfernen, wird viel mehr als nötig entfernt. Über den Punkt der Wiederverwendung von Modal hinaus. Wenn es hilft, schlage ich vor, Ihre spezifische class.remove () zu verwenden;
Alphapilgrim
12

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.

Arjun
quelle
.remove () entfernt es vollständig. Und .show () funktioniert nicht mehr. Was initialisiere ich erneut?
geeky_monster
Da beim Erstellen eines Bootstrap-Modals Änderungen an der bodyvorgeschlagenen Lösung vorgenommen werden, werden nicht alle Änderungen rückgängig gemacht.
Zelibobla
2
Das wird nicht funktionieren, weil der Hintergrund hängen bleibt. Warum wurde er überhaupt positiv bewertet?
Codenamezero
4

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('');
});
John ist nicht Hout
quelle
4

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

طلحة
quelle
Dies hinterlässt auch einen grauen Hintergrund und macht die Webseite unbrauchbar !!
Biju
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})
Robert Hoffmann
quelle
3

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", "");
});
Saeid Zebardast
quelle
Dies war derjenige, der mir geholfen hat;) also brauchte ich keine API, um es zu stoppen
Alexa Adrian
2

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.

Sherbrow
quelle
2

Bootstrap 3 + jquery 2.0.3:

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})
user2813480
quelle
1
Da beim Erstellen eines Bootstrap-Modals Änderungen an der bodyvorgeschlagenen Lösung vorgenommen werden, werden nicht alle Änderungen rückgängig gemacht.
Zelibobla
2

Das ist meine Lösung:

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

Daniel Ortegón
quelle
1

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

//Just add .remove(); 
//Bootstrap v3.0.3
Luca Di Lenardo
quelle
Obwohl dieser Code tatsächlich eine Lösung für das Problem darstellt, ist es im Allgemeinen eine gute Idee, eine Erklärung dessen beizufügen, was er bei der Beantwortung einer Frage tut.
Sebastian Lenartowicz
OK. Ich hatte es eilig ... füge trotzdem ".remove ();" zum Entfernen aller Referenz- und HTML-Codes Ihres Bootstrap-Modals.
Luca Di Lenardo
1

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

});
Alin Razvan
quelle
Kann das Modal danach neu initialisiert werden?
rahim.nagori
@ rahim.nagori, wie es in der Beschreibung schreibt, löscht das Modal aus dem DOM, Sie können es erneut hinzufügen ... schließt das Modal nicht, löscht ihn, der Thread handelt davon, das Modalfenster vollständig zu zerstören.
Alin Razvan
1

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.

Dijoe
quelle
1
Dies hinterlässt auch einen grauen Hintergrund und macht die Webseite unbrauchbar !!
Biju
1

Funktioniert auch mit Bootstrap 4.x.

$('#modal_ID').modal( 'hide' ).data( 'bs.modal', null );
Cristian Ghirba
quelle
Dies entsorgt das Modal, hinterlässt jedoch einen grauen Hintergrund, der die Webseite unbrauchbar macht
Biju
In welcher Bootstrap-Version haben Sie es versucht?
Cristian Ghirba
0

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();
    }
});
Akshay
quelle
1
Live ist veraltet und muss durch on ersetzt werden. Die [0] für das Element, auf das Sie abzielen, ist nicht erforderlich, wenn Sie jQuery verwenden. Wenn Sie den Hintergrund vollständig entfernen, müssen Sie ihn möglicherweise wieder hinzufügen ... Versuchen Sie: $(document).on('hidden.bs.modal', '.modal', function(e) { if ($('.modal-backdrop').length) { $('.modal-backdrop').remove(); } });
Thomas Bennett
0

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.

Guy Fawkes
quelle
0

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.

Rob Y.
quelle
0

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();
});
Maksym Kalin
quelle
0

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

Amir
quelle
Dies hinterlässt auch einen grauen Hintergrund und macht die Webseite unbrauchbar !!
Biju
0

Einzeilige vollständige Entfernung auf Fell (ES6)

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

Dieter Gribnitz
quelle
-1

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
});
Bill Milagro
quelle
-4

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

$("#YourModalID").modal('hide');
Samson Iyanda
quelle
Downvoted, weil es nur das Modal verbirgt, was eindeutig nicht gefragt wurde.
AlexioVay