Der modale Hintergrund des Twitter-Bootstraps verschwindet nicht

Ich verwende den Twitter Bootstrap Modal Dialog. Wenn ich im modalen Bootstrap-Dialogfeld auf die Schaltfläche "Senden" klicke, wird eine AJAX-Anfrage gesendet. Mein Problem ist, dass der modale Hintergrund nicht verschwindet. Das Modal-Dialogfeld wird zwar korrekt ausgeblendet, aber der "Modal-Hintergrund", der die Deckkraft auf dem Bildschirm erzeugt, bleibt erhalten

Was kann ich tun?

Stellen Sie sicher, dass Sie den Container mit dem eigentlichen modalen Fenster nicht ersetzen, wenn Sie die AJAX-Anforderung ausführen, da Bootstrap beim Versuch, ihn zu schließen, keinen Verweis darauf finden kann. Entfernen Sie in Ihrem Ajax Complete Handler das Modal und ersetzen Sie die Daten.

Wenn das nicht funktioniert, können Sie es jederzeit erzwingen, indem Sie Folgendes tun:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

Stellen Sie sicher, dass Ihr erster Aufruf zur $.modal()Anwendung des modalen Verhaltens nicht mehr Elemente als beabsichtigt übergibt. In diesem Fall wird eine modale Instanz mit Hintergrundelement für JEDES Element in der Sammlung erstellt. Folglich könnte es so aussehen, als wäre der Hintergrund zurückgelassen worden, wenn Sie tatsächlich eines der Duplikate betrachten.

In meinem Fall habe ich versucht, den modalen Inhalt im laufenden Betrieb mit einem Code wie dem folgenden zu erstellen:

myModal = $('<div class="modal">...lots of HTML content here...</div><!-- end modal -->');
$('body').append(myModal);
myModal.modal();

Hier bedeutete der HTML-Kommentar nach dem schließenden </div>Tag, dass myModal tatsächlich eine jQuery-Sammlung von zwei Elementen war - dem div und dem Kommentar. Beide wurden pflichtbewusst in Modale verwandelt, jedes mit seinem eigenen Hintergrundelement. Natürlich war das aus dem Kommentar erstellte Modal abgesehen vom Hintergrund unsichtbar. Als ich das echte Modal (das Div) schloss, sah es so aus, als wäre der Hintergrund zurückgeblieben.

Ich habe einfach viel zu lange mit diesem Problem verbracht :)

Obwohl die anderen Antworten hilfreich und gültig sind, schien es mir ein wenig chaotisch, die Funktion zum modalen Ausblenden von Bootstrap effektiv wiederherzustellen, sodass ich eine sauberere Lösung gefunden habe.

Das Problem ist, dass es eine Kette von Ereignissen gibt, die auftreten, wenn Sie anrufen

$("#myModal").modal('hide');
functionThatEndsUpDestroyingTheDOM()

Wenn Sie dann als Ergebnis der AJAX-Anforderung eine Reihe von HTML-Code ersetzen, werden die Ereignisse zum Ausblenden von Modalitäten nicht beendet. Bootstrap löst jedoch ein Ereignis aus, wenn alles fertig ist , und Sie können sich wie folgt daran anschließen :

$("#myModal").modal('hide').on('hidden.bs.modal', functionThatEndsUpDestroyingTheDOM);

Hoffe das ist hilfreich!

Fügen Sie in Ihre Aktionsschaltfläche Folgendes ein:

data-backdrop="false"

und

data-dismiss="modal" 

Beispiel:

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

Wenn Sie diesen Datenattr eingeben, wird der .modal-Hintergrund nicht angezeigt. Dokumentation dazu unter folgendem Link: http://getbootstrap.com/javascript/#modals-usage

Wenn Sie ein Kopieren und Einfügen von der getboostrap-Site selbst in einen von HTML generierten Selektor verwenden, müssen Sie den Kommentar '<! - /.modal ->' entfernen. Bootstrap wird verwirrt und denkt, dass der Kommentar ein zweites modales Element ist. Es wird ein weiterer Hintergrund für dieses "zweite" Element erstellt.

Ich weiß, dass dies ein sehr alter Beitrag ist, aber das könnte helfen. Dies ist eine sehr kleine Problemumgehung von mir

$('#myModal').trigger('click');

Das ist es, dies sollte das Problem lösen

Ich hatte ein ähnliches Problem: In meinem modalen Fenster habe ich zwei Schaltflächen: "Abbrechen" und "OK". Ursprünglich schlossen beide Schaltflächen das modale Fenster durch Aufrufen $('#myModal').modal('hide')(wobei "OK" zuvor Code ausführte), und das Szenario wäre das folgende:

1. Öffnen Sie das modale Fenster
2. Führen Sie einige Vorgänge aus, klicken Sie dann auf "OK", überprüfen Sie sie und schließen Sie das Modal
3. Öffnen Sie das Modal erneut und schließen Sie es, indem Sie auf "Abbrechen" klicken.
4. Öffnen Sie das Modal erneut und klicken Sie erneut auf "Abbrechen" ==> Der Hintergrund ist nicht mehr zugänglich!

Nun, mein Kollege am nächsten Schreibtisch hat mir den Tag gerettet: Anstatt aufzurufen $('#myModal').modal('hide'), geben Sie Ihren Schaltflächen das Attribut data-dismiss="modal"und fügen Sie Ihrer Schaltfläche "Senden" ein "Klick" -Ereignis hinzu. In meinem Problem lautet der HTML-Code (also TWIG) für die Schaltfläche:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

und in meinem JavaScript-Code habe ich:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

Während der Schaltfläche "Abbrechen" kein "Klick" -Ereignis zugeordnet ist. Das Modal wird jetzt ordnungsgemäß geschlossen und ich kann wieder mit der "normalen" Seite spielen. Es scheint tatsächlich, dass data-dismiss="modal"dies der einzige Weg sein sollte, um anzuzeigen, dass eine Schaltfläche (oder ein beliebiges DOM-Element) ein Bootstrap-Modal schließen sollte. Die .modal('hide')Methode scheint sich nicht ganz kontrollierbar zu verhalten.

Hoffe das hilft!

Dieses Problem kann auch auftreten, wenn Sie das modale Fenster zu schnell ausblenden und dann wieder anzeigen. Dies wurde an anderer Stelle zur Frage erwähnt, aber ich werde unten einige Details liefern.

Das Problem hat mit dem Timing und dem Fade-Übergang zu tun. Wenn Sie ein Modal anzeigen, bevor der Ausblendübergang für das vorherige Modal abgeschlossen ist, wird dieses anhaltende Hintergrundproblem angezeigt (der modale Hintergrund bleibt auf Ihre Weise auf dem Bildschirm). Bootstrap unterstützt explizit nicht mehrere Modalitäten gleichzeitig, aber dies scheint ein Problem zu sein, selbst wenn das Modal, das Sie verstecken, und das Modal, das Sie anzeigen, identisch sind.

Wenn dies der richtige Grund für Ihr Problem ist, finden Sie hier einige Optionen zur Minderung des Problems. Option 1 ist ein schneller und einfacher Test, um festzustellen, ob der Zeitpunkt des Überblendungsübergangs tatsächlich die Ursache für Ihr Problem ist.

1. Deaktivieren Sie die Fade-Animation für das Modal (entfernen Sie die "Fade" -Klasse aus dem Dialogfeld).
2. Aktualisieren Sie den Text des Modals, anstatt ihn auszublenden und erneut anzuzeigen.
3. Korrigieren Sie das Timing so, dass das Modal erst angezeigt wird, wenn das vorherige Modal ausgeblendet ist. Verwenden Sie dazu die Ereignisse des Modals. http://getbootstrap.com/javascript/#modals-events

Hier sind einige verwandte Beiträge zum Bootstrap-Problem-Tracker. Es ist möglich, dass es mehr Tracker-Beiträge gibt, als ich unten aufgeführt habe.

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

.modal ('verstecken')

Versteckt manuell ein Modal. Kehrt zum Aufrufer zurück, bevor das Modal tatsächlich ausgeblendet wurde (dh bevor das Ereignis hidden.bs.modal auftritt).

Also statt

$('#myModal').modal('hide');
$('#someOtherSelector').trigger('click');

tun

$('#myModal').modal('hide');
$('#myModal').on('hidden.bs.modal', function() {
   $('#someOtherSelector').trigger('click');
});

Sie können also sicher warten, bis das "Verstecken" -Ereignis beendet ist.

Ein weiterer möglicher Fehler, der dieses Problem verursachen könnte,

Stellen Sie sicher, dass Sie das bootstrap.jsSkript nicht mehr als einmal in Ihre Seite aufgenommen haben!

Selbst wenn ich auf ein ähnliches Problem stieß, hatte ich die folgenden zwei Tasten

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

Ich wollte eine Ajax-Operation durchführen und nach Erfolg dieser Ajax-Operation das Modal schließen. Also hier ist was ich getan habe.

$.ajax({
        url: '/ABC/Delete/' + self.model.get("Id")
            , type: 'DELETE'
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

Ich habe das Klickereignis der Schaltfläche "Nein" ausgelöst, die die data-dismiss="modal"Eigenschaft hatte. Und das hat funktioniert :)

verwenden:

$('.modal.in').modal('hide') 

Quelle

Diese Lösung ist für Ruby on Rails 3.x und eine js.erb-Datei vorgesehen, die einen Teil des DOM einschließlich des Modals neu erstellt. Es funktioniert unabhängig davon, ob der Ajax-Aufruf vom Modal oder von einem anderen Teil der Seite kam.

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal('hide').on('hidden.bs.modal', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

Vielen Dank an @BillHuertas für den Startpunkt.

$ ('# myModal'). trigger ('click');

Das hat bei mir funktioniert. Es wird nicht geschlossen, da beim Öffnen des Popups 2 oder 3 modale Hintergründe ausgelöst werden. Wenn Sie also $ ('# myModal')) tun. Modal ('hide'); es wirkt sich nur auf einen modalen Hintergrund aus und es bleibt Ruhe.

Updatepanel-Problem.

Mein Problem war auf die Platzierung des Updatepanels zurückzuführen. Ich hatte das gesamte Modal im Updatepanel. Wenn Sie das Modal außerhalb des Update-Bereichs deklarieren und im Update-Bereich nur den Modal-Body angeben, dann das $ ('# myModalID'). Modal ('hide'); hat funktioniert.

Ein weiterer Gesichtspunkt zu dieser Frage. (Ich verwende die bootstrap.js Version 3.3.6)

Ich habe die Modalisierung von Modal sowohl manuell als auch in Javascript verwechselt:

$('#myModal').modal({
   keyboard: false
})

und mit

data-toggle="modal"

in dieser Schaltfläche wie im folgenden Beispiel (im Dokument gezeigt)

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

Das Ergebnis ist also, dass zwei Instanzen von erstellt werden

<div class="modal-backdrop fade in"></div>

beim Öffnen des Modals an den Text meines HTML anhängen. Dies kann die Ursache beim Schließen des Modals mithilfe der folgenden Funktion sein:

$('#myModal').modal('hide');

Es wird nur eine Hintergrundinstanz entfernt (wie oben gezeigt), damit der Hintergrund nicht verschwindet. Aber es ist verschwunden, wenn Sie data-dismiss="modal"Add-On-HTML als Show im Bootstrap-Dokument verwenden.

Die Lösung für mein Problem besteht also darin, Modal nur manuell in Javascript zu initialisieren und kein Datenattribut zu verwenden. Auf diese Weise kann ich das Modal sowohl manuell als auch mithilfe von data-dismiss="modal"Funktionen schließen.

Ich hoffe, dies hilft, wenn Sie auf dasselbe Problem wie ich stoßen.

Zu Ihrer Information, falls jemand noch darauf stößt ... Ich habe ungefähr 3 Stunden damit verbracht herauszufinden, dass der beste Weg, dies zu tun, wie folgt ist:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$('.modal-backdrop').hide();
$("body").removeClass("modal-open");

Diese Funktion zum Schließen des Modals ist sehr unintuitiv.

Das Hinzufügen data-dismiss="modal"von Schaltflächen in meinem Modal hat bei mir funktioniert. Ich wollte, dass meine Taste eine Funktion mit Winkel aufruft, um einen Ajax-Aufruf auszulösen UND das Modal zu schließen, also fügte ich ein .toggle()innerhalb der Funktion hinzu und es funktionierte gut. (In meinem Fall habe ich einen bootstrap modalund einige verwendet angular, keinen tatsächlichen modalen Controller).

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}

Ich hatte das gleiche Problem. Ich habe festgestellt, dass dies auf einen Konflikt zwischen Bootstrap und JQueryUI zurückzuführen ist.

Beide verwenden die Klasse "close". Das Ändern der Klasse in der einen oder anderen Klasse behebt dies.

Die Verwendung von Toggle anstelle von Hide löste mein Problem

Stellen Sie sicher, dass Sie nicht dieselbe Element-ID / Klasse für ein Element verwenden, das nicht mit der modalen Komponente zusammenhängt.

Das heißt, wenn Sie Ihre Schaltflächen, die die modalen Popups auslösen, mit dem Klassennamen 'myModal' identifizieren, stellen Sie sicher, dass keine nicht verwandten Elemente mit demselben Klassennamen vorhanden sind.

Nach dem Anwenden der am besten bewerteten Lösung hatte ich das Problem, dass zukünftige Modalitäten ordnungsgemäß geöffnet werden. Ich habe meine Lösung gefunden, die gut funktioniert

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });

Ich hatte das gleiche Problem beim Versuch, das Formular einzureichen. Die Lösung bestand darin, den Schaltflächentyp von submitauf zu ändern buttonund dann das Schaltflächenklickereignis wie folgt zu behandeln:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}

Im .net MVC4-Projekt hatte ich das modale Popup (Bootstrap 3.0) in einem Ajax.BeginForm (OnComplete = "addComplete" [zusätzlicher Code gelöscht]). Im "addComplete" -Javascript hatte ich den folgenden Code. Dies löste mein Problem.

$ ('# moreLotDPModal'). hide ();

$ ("# moreLotDPModal"). data ('bs.modal'). isShown = false;

$ ('body'). removeClass ('modal-open');

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

$ ('# moreLotDPModal'). removeClass ("in");

$ ('# moreLotDPModal'). attr ('aria-hidden', "true");

Ich hatte genau das gleiche Problem.

Ich habe jedoch bootbox.js verwendet, also könnte es etwas damit zu tun haben.

In beiden Fällen wurde mir klar, dass das Problem durch ein Element mit derselben Klasse wie das übergeordnete Element verursacht wurde. Wenn eines dieser Elemente verwendet wird, um eine Klickfunktion zu binden, um das Modal anzuzeigen, tritt das Problem auf.

dh dies ist der Grund für das Problem:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

Ändern Sie es so, dass das angeklickte Element nicht dieselbe Klasse wie das übergeordnete Element, eines seiner untergeordneten Elemente oder andere Vorfahren hat. Es ist wahrscheinlich eine gute Praxis, dies im Allgemeinen zu tun, wenn Sie Klickfunktionen binden.

Ich arbeite mit Meteor und habe gerade das gleiche Problem. Die Ursache meines Fehlers war folgende:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

Wie Sie sehen können, habe ich das Modal im else hinzugefügt. Als mein Modal die Kontaktinformationen aktualisierte, hatte das if einen anderen Status. Dies führte dazu, dass die modale Vorlage kurz vor dem Schließen aus dem DOM entfernt wurde.

Die Lösung: Verschieben Sie das Modal aus dem if-else:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

//Create modal appending on body
myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
       $('body').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $('#myModal').clone();
myModalBackup.find('.modal-backdrop').remove();
$('#myModal').modal('hide').remove();
myModalBackup.find('.info1').html('customize element <b>1</b>...');
myModalBackup.find('.info2').html('customize element <b>2</b>...');                             
myModalBackup.modal('show');

Geige -> https://jsfiddle.net/o6th7t1x/4/

Der Anfangswert Ihres Datenhintergrundattributs kann sein

"statisch", "wahr", "falsch".

statisch und wahr fügen den modalen Schatten hinzu, während falsch den Schatten deaktiviert, sodass Sie diesen Wert nur mit dem ersten Klick auf falsch ändern müssen. so was:

$(document).on('ready',function(){
	
	var count=0;
	
$('#id-which-triggers-modal').on('click',function(){
		
		if(count>0){
		
			$(this).attr('data-backdrop','false')
		}
		count++;
});


});

Ich hatte das Problem mit dem Einfrieren des modalen Hintergrundbildschirms, aber in einem etwas anderen Szenario: Als 2 hintereinander liegende Modalitäten angezeigt wurden. Beispiel: Der erste würde um Bestätigung bitten, um etwas zu tun, und nachdem auf die Schaltfläche "Bestätigen" geklickt wurde, würde die Aktion auf einen Fehler stoßen und das zweite Modal würde angezeigt, um die Fehlermeldung anzuzeigen. Der 2. modale Hintergrund würde den Bildschirm einfrieren. Es gab keine Konflikte zwischen Klassennamen oder IDs der Elemente.

Das Problem wurde behoben, indem dem Browser genügend Zeit gegeben wurde, um sich mit dem modalen Hintergrund zu befassen. Anstatt die Aktion sofort nach dem Klicken auf "Bestätigen" auszuführen, geben Sie dem Browser 500 ms, um das erste Modal auszublenden und den Hintergrund usw. zu bereinigen. Führen Sie dann die Aktion aus, die dazu führen würde, dass das Fehlermodal angezeigt wird.

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

Die Funktion _dialogConfirmed () hat den folgenden Code:

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

Ich vermute, die anderen Lösungen haben funktioniert, weil sie genug zusätzliche Zeit in Anspruch genommen haben, um dem Browser die erforderliche Bereinigungszeit zu geben.

Fügen Sie in ASP.NET nach dem Befehl jquery ein Update für UpdatePanel für den Code dahinter hinzu. Beispiel:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal('hide');", true);
    upModal.Update();