it-swarm.com.de

Twitter-Bootstrap-Modal-Hintergrund verschwindet nicht

Ich benutze den Twitter-Bootstrap-Modal-Dialog. Wenn ich auf den Submit-Button des modalen Dialogfelds für Bootstrap klicke, wird eine AJAX -Anforderung gesendet. Mein Problem ist, dass der modale Hintergrund nicht verschwindet. Der Modal-Dialog verschwindet korrekt, stattdessen bleibt "Modal-Hintergrund" erhalten, wodurch die Deckkraft auf dem Bildschirm erhalten bleibt

Was kann ich machen?

238
paganotti

Stellen Sie sicher, dass Sie den Container, der das aktuelle modale Fenster enthält, nicht ersetzen, wenn Sie die Anforderung AJAX ausführen, da Bootstrap beim Schließen keine Verbindung zum Container finden kann. Entfernen Sie in Ihrem Ajax Complete-Handler das Modal und ersetzen Sie die Daten.

Wenn dies nicht funktioniert, können Sie es immer wie folgt zwingen:

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

Stellen Sie sicher, dass Ihr erster Aufruf an $.modal() zur Anwendung des modalen Verhaltens nicht mehr Elemente als beabsichtigt übergibt. In diesem Fall wird für jedes Element in der Auflistung eine modale Instanz mit Hintergrundelement erstellt. Es könnte also so aussehen, als ob die Kulisse zurückgelassen wurde, wenn Sie tatsächlich eines der Duplikate betrachten.

In meinem Fall habe ich versucht, den modalen Inhalt 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-Auflistung aus zwei Elementen war - dem div und dem Kommentar. Beide wurden pflichtbewusst zu Modalen mit jeweils eigenem Hintergrundelement. Natürlich war das aus dem Kommentar gemachte Modal abgesehen von der Kulisse nicht sichtbar. Wenn ich also das echte Modal (das Div) schließe, sah es so aus, als würde der Hintergrund zurückgelassen.

64
gasman

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

Während die anderen Antworten hilfreich und gültig sind, erschien es mir ein wenig chaotisch, die Modal-Hiding-Funktionalität in Bootstrap effektiv neu zu erstellen. Ich habe also eine sauberere Lösung gefunden.

Das Problem ist, dass beim Aufruf eine Kette von Ereignissen auftritt

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

Wenn Sie dann als Ergebnis der Anforderung AJAX eine Reihe von HTML-Dateien ersetzen, werden die Modal-Hiding-Ereignisse nicht beendet. Bootstrap löst jedoch ein Ereignis aus, wenn alles beendet ist, und Sie können sich wie folgt anschließen:

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

Hoffe das ist hilfreich!

49
Bill Huertas

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 dieses Datenattribut eingeben, wird der .modal-Hintergrund nicht angezeigt . Dokumentation dazu unter diesem Link: http://getbootstrap.com/javascript/#modals-usage

31
kampageddon

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

18
Jordan

Ich hatte ein ähnliches Problem: In meinem modalen Fenster habe ich zwei Schaltflächen, "Abbrechen" und "OK". Ursprünglich schließen beide Schaltflächen das modale Fenster, indem sie $('#myModal').modal('hide') aufrufen (mit "OK", bevor zuvor Code ausgeführt wurde). Das Szenario wäre das folgende:

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

nun, mein nächster Mitarbeiter hat meinen Tag gerettet: Statt $('#myModal').modal('hide') aufzurufen, geben Sie Ihren Schaltflächen das Attribut data-dismiss="modal" und fügen Sie Ihrem "Senden" -Button ein "click" -Ereignis hinzu. In meinem Problem lautet der HTML-Code (gut, 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 wird. Der Modal schließt jetzt richtig und lässt mich wieder mit der "normalen" Seite spielen. Es scheint tatsächlich so zu sein, dass data-dismiss="modal" die einzige Möglichkeit ist, um anzuzeigen, dass eine Schaltfläche (oder ein anderes DOM-Element) ein Bootstrap-Modal schließen soll. Die .modal('hide')-Methode scheint sich auf nicht ganz kontrollierbare Weise zu verhalten.

Hoffe das hilft!

9
Dima Gabachov

Dieses Problem kann auch auftreten, wenn Sie das modale Fenster zu schnell ausblenden und wieder anzeigen. Dies wurde an anderer Stelle für Fragen erwähnt, aber ich werde im Folgenden etwas näher darauf eingehen.

Das Problem hat mit dem Timing und dem Überblendungsübergang zu tun. Wenn Sie einen Modal anzeigen, bevor der Überblendungsübergang für den vorherigen Modal abgeschlossen ist, wird dieses Problem mit dem permanenten Hintergrund angezeigt (der modale Hintergrund bleibt auf dem Bildschirm auf Ihrem Weg). Bootstrap unterstützt explizit nicht mehrere gleichzeitige Modale. Dies scheint jedoch ein Problem zu sein, auch wenn das versteckte und das angezeigte Modal 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 zu bestimmen, ob die Überblendzeit der Überblendung tatsächlich die Ursache Ihres Problems ist.

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

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

8
Mark F Guerra

.modal ('hide')

Blendet manuell einen Modal aus. Kehrt zum Anrufer zurück, bevor das Modal tatsächlich ausgeblendet wurde (d. H. Bevor das hidden.bs.modal -Ereignis auftritt).

Also statt 

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

tun

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

Sie werden also sicher warten, bis das "Hide" -Ereignis abgeschlossen ist.

7
Helmut Hackl

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 bei Erfolg dieser Ajax-Operation den 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 Eigenschaft data-dismiss="modal" hatte. Und das hat funktioniert :)

5
Yasser

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, das sollte das Problem lösen

4

benutzen:

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

Quelle

4
Jamshid Hashimi

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

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

Danke an @BillHuertas für den Startpunkt.

3
mindriot

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

Ich habe die Modalisierung sowohl manuell als auch manuell in Javascript falsch gemacht:

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

und mit 

data-toggle="modal" 

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

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

so das Ergebnis seine zwei Instanz von erstellen 

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

an den Körper meiner HTML-Datei anhängen, wenn das Modal geöffnet wird. Dies kann die Ursache sein, wenn der Modal mit der Funktion geschlossen wird:

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

es entfernt nur eine Hintergrundinstanz (wie oben gezeigt), damit der Hintergrund nicht verschwindet. Es verschwand jedoch, wenn Sie data-dismiss="modal" add on html als show in bootstrap doc verwenden. 

Die Lösung meines Problems 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, das hilft, wenn Sie das gleiche Problem wie ich hatten.

2
ohm89

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

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

2
Webinan

updatepanel-Problem.

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

2
Al Option

Mit Toggle statt Verstecken löste ich mein Problem

1
Yash K

Ich hatte das gleiche Problem, als ich das Formular abschicken wollte. Die Lösung bestand darin, den Schaltflächentyp von submit in button zu ändern und das Klickereignis der Schaltfläche dann wie folgt zu behandeln:

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

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

Wenn Sie also Ihre Schaltflächen identifizieren, die die modalen Popups mit dem Klassennamen 'myModal' auslösen, müssen Sie sicherstellen, dass keine nicht verbundenen Elemente denselben Klassennamen haben. 

1
user2707674

Zu Ihrer Information, falls noch jemand darauf stößt ... Ich habe ungefähr 3 Stunden gebraucht, um 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 uninteressant.

1
Nick M

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

Das hat bei mir funktioniert. Es wird nicht geschlossen, da beim Öffnen des Popup-Fensters 2 oder 3 Modal-Kulissen ausgelöst werden. Wenn Sie also $ ('# myModal')) machen. Modal ('hide'); es wirkt nur auf eine modale Kulisse und der Rest bleibt. 

1
Ashhab

Fügen Sie in ASP.NET ein Update für UpdatePanel für den Code hinter dem Befehl Beispiel:

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

Das Hinzufügen von data-dismiss="modal" auf beliebigen Schaltflächen in meinem Modal hat für mich funktioniert. Ich wollte, dass meine Schaltfläche eine Funktion mit Winkeln aufruft, um einen Ajax-Anruf auszulösen UND das Modal zu schließen. Ich fügte der Funktion eine .toggle() hinzu und es funktionierte gut. (In meinem Fall habe ich einen bootstrap modal und eine angular verwendet, nicht einen 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 })
}
0
wendyg

Ich hatte das gleiche Problem.

Ich habe jedoch bootbox.js verwendet, also hätte es etwas damit zu tun haben können.

In jedem Fall wurde mir klar, dass das Problem dadurch verursacht wurde, dass ein Element dieselbe Klasse wie sein übergeordnetes Element hatte. Wenn eines dieser Elemente verwendet wird, um eine Klickfunktion zu binden, um das Modal anzuzeigen, tritt das Problem auf.

das ist, was das Problem verursacht:

<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 allgemein zu tun, wenn Klickfunktionen gebunden werden.

0
Vin

Ich arbeite mit Meteor und habe 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, habe ich das Modal in das else eingefügt. Wenn also mein Kontakt modifiziert wurde, hatte die If einen anderen Status. Dies hat dazu geführt, dass die modale Vorlage kurz vor dem Schließen aus dem DOM ausgeschlossen 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}}
0
Scuba Kay

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

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

0

der Anfangswert Ihres data-backdrop -Attributs kann sein 

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

static und true fügen den modalen Schatten hinzu, während false den Schatten deaktiviert. Sie müssen diesen Wert also mit dem ersten Klick auf false ändern. 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++;
});


});

0

Ich hatte das modale Hintergrundbild-Einfrierproblem, aber in einem etwas anderen Szenario: Wenn 2 Rücken an Rücken-Modale angezeigt wurden. z.B. Der erste würde nach einer Bestätigung fragen, um etwas zu tun, und nachdem Sie auf die Schaltfläche "Bestätigen" geklickt haben, würde die Aktion auf einen Fehler stoßen, und der 2. Modal würde angezeigt, um die Fehlermeldung aufzurufen. Die 2. modale Kulisse würde den Bildschirm einfrieren. Es gab keine Konflikte mit Klassennamen oder IDs der Elemente.

Die Lösung des Problems bestand darin, dem Browser genügend Zeit zu geben, sich mit dem modalen Hintergrund zu beschäftigen. Anstatt die Aktion sofort auszuführen, nachdem auf "Bestätigen" geklickt wurde, geben Sie dem Browser 500ms, um den 1. Modal-Modus auszublenden, und bereinigen Sie den Hintergrund usw. - und führen Sie dann die Aktion aus, bei der der Fehlermodal angezeigt wird.

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

Die Funktion _dialogConfirmed () hat folgenden Code:

    var that = this;

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

Ich vermute, die anderen Lösungen funktionierten, weil sie genug Zeit benötigten, um dem Browser die erforderliche Bereinigungszeit zu geben.

0
Behnam
//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/

0

Nach der Anwendung der am besten bewerteten Lösung hatte ich das Problem, dass zukünftige Modals richtig 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');
        });
0
Rez

In .net MVC4-Projekt hatte ich das modale Popup (Bootstrap 3.0) in einer Ajax.BeginForm (OnComplete = "addComplete" [zusätzlicher Code gelöscht]). In dem Javascript "addComplete" hatte ich den folgenden Code. Das hat mein Problem gelöst.

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

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

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

$ ('. Modal-Hintergrund'). remove ();

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

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

0
JenonD

Von https://github.com/twbs/bootstrap/issues/19385

Die Show/Hide-Methoden von Modal sind asynchron. Daher Code wie:

foo.modal("hide"); bar.modal("show"); ist ungültig. Sie müssen auf .__ warten. Das Anzeigen/Ausblenden muss tatsächlich abgeschlossen werden (durch Abhören der angezeigten /ausgeblendeten Ereignisse; siehe http://getbootstrap.com/javascript/#modals-events ), bevor die aufgerufen werden. Methoden erneut anzeigen oder ausblenden.

Ich hatte dieses Problem, als ich das gleiche Modal zweimal zu schnell öffnete. Eine einfache Lösung bestand darin, zu überprüfen, ob es bereits angezeigt wurde, und es dann nicht mehr anzuzeigen:

$('#modalTitle').text(...);
$('#modalMessage').text(...);
if($('#messageModal').is(':hidden')){
    $('#messageModal').modal('show');
}
0
shinzou

für mich ist das die beste Antwort. 

<body>
<!-- All other HTML -->
<div>
    ...
</div>

<!-- Modal -->
<div class="modal fade" id="myModal">
    ...
</div>

Modale Markup-Platzierung Versuchen Sie immer, den HTML-Code eines Modals an oberster Position in Ihrem Dokument zu platzieren, um zu vermeiden, dass andere Komponenten das Erscheinungsbild und/oder die Funktionalität des Modals beeinflussen.

aus dieser SO Antwort

0
PurTahan

Versuche dies 

$('#something_clickable').on('click', function () {
  $("#my_modal").modal("hide");
  $("body").removeClass("modal-open");
  $('.modal-backdrop').remove();
 });

Es funktioniert gut für mich.

0
A H K

Ich hatte ein ähnliches Problem. Ich habe Boostrap zusammen mit Backbone verwendet, und ich habe Klicks der Schaltfläche "Do it" erfasst und dann die Verbreitung dieser Ereignisse angehalten. Seltsamerweise ging der Modal weg, nicht aber der Hintergrund. Wenn ich event.preventDefault () und nicht stopPropagation () aufrufe, funktioniert alles einwandfrei.

0
gischer