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?
twitter-bootstrap
modal-dialog
Paganotti
quelle
quelle
$('#myModal').modal('hide')
? Können Sie hier einen Code einfügen?Antworten:
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:
quelle
$('.modal-backdrop').remove()
scheint zukünftige Modalitäten richtig zu öffnen.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:
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.quelle
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
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 :
Hoffe das ist hilfreich!
quelle
$('#myModal').removeClass('fade');$(myModal').modal('hide')'
Fügen Sie in Ihre Aktionsschaltfläche Folgendes ein:
und
Beispiel:
Wenn Sie diesen Datenattr eingeben, wird der .modal-Hintergrund nicht angezeigt. Dokumentation dazu unter folgendem Link: http://getbootstrap.com/javascript/#modals-usage
quelle
data-backdrop="false"
ist einfach eine Option, die Bootstrap anweist, überhaupt keinen Hintergrund zu verwenden . Dies hat nichts mit dem eigentlichen Problem zu tun, es vermeidet es nur. Es wäre, als würde man sagen "Ich kann nicht schwimmen, also habe ich aufgehört, in den Pool zu steigen". Das ist cool, aber du kannst immer noch nicht schwimmen und wenn dein Chef dich in die Tiefe wirft, wirst du ertrinken. Es gibt viele Fälle, in denen manuelle Eingriffe erforderlich sind, z. B. wenn Angular im Hintergrund Ihrer App auf das DOM stampft.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.
quelle
Ich weiß, dass dies ein sehr alter Beitrag ist, aber das könnte helfen. Dies ist eine sehr kleine Problemumgehung von mir
Das ist es, dies sollte das Problem lösen
quelle
myModal
soll sein Und warum sollte es den Dialog schließen? Modale Dialoge werden nur durch Klicken auf die Schaltfläche Schließen oder außerhalb des Dialogfelds geschlossen. Dies scheint keine Lösung zu sein.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:Nun, mein Kollege am nächsten Schreibtisch hat mir den Tag gerettet: Anstatt aufzurufen
$('#myModal').modal('hide')
, geben Sie Ihren Schaltflächen das Attributdata-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:und in meinem JavaScript-Code habe ich:
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!
quelle
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.
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.
quelle
.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
tun
Sie können also sicher warten, bis das "Verstecken" -Ereignis beendet ist.
quelle
Ein weiterer möglicher Fehler, der dieses Problem verursachen könnte,
Stellen Sie sicher, dass Sie das
bootstrap.js
Skript nicht mehr als einmal in Ihre Seite aufgenommen haben!quelle
Selbst wenn ich auf ein ähnliches Problem stieß, hatte ich die folgenden zwei Tasten
Ich wollte eine Ajax-Operation durchführen und nach Erfolg dieser Ajax-Operation das Modal schließen. Also hier ist was ich getan habe.
Ich habe das Klickereignis der Schaltfläche "Nein" ausgelöst, die die
data-dismiss="modal"
Eigenschaft hatte. Und das hat funktioniert :)quelle
verwenden:
Quelle
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.
Vielen Dank an @BillHuertas für den Startpunkt.
quelle
$ ('# 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.
quelle
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.
quelle
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:
und mit
data-toggle="modal"
in dieser Schaltfläche wie im folgenden Beispiel (im Dokument gezeigt)
Das Ergebnis ist also, dass zwei Instanzen von erstellt werden
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:
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.
quelle
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:
Diese Funktion zum Schließen des Modals ist sehr unintuitiv.
quelle
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 einenbootstrap modal
und einige verwendetangular
, keinen tatsächlichen modalen Controller).quelle
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.
quelle
Die Verwendung von Toggle anstelle von Hide löste mein Problem
quelle
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.
quelle
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
quelle
Ich hatte das gleiche Problem beim Versuch, das Formular einzureichen. Die Lösung bestand darin, den Schaltflächentyp von
submit
auf zu ändernbutton
und dann das Schaltflächenklickereignis wie folgt zu behandeln:quelle
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.
quelle
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:
Ä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.
quelle
Ich arbeite mit Meteor und habe gerade das gleiche Problem. Die Ursache meines Fehlers war folgende:
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:
quelle
Geige -> https://jsfiddle.net/o6th7t1x/4/
quelle
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:
quelle
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.
Die Funktion _dialogConfirmed () hat den folgenden Code:
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.
quelle
Fügen Sie in ASP.NET nach dem Befehl jquery ein Update für UpdatePanel für den Code dahinter hinzu. Beispiel:
quelle