Nachdem ich viele Korrekturen dafür gesehen hatte und keine genau das war, was ich brauchte, habe ich eine noch kürzere Lösung gefunden, die von @YermoLamers & @Ketwaroo inspiriert ist .
Hintergrund-Z-Index-Fix
Diese Lösung verwendet a, setTimeout
da das .modal-backdrop
nicht erstellt wird, wenn das Ereignis show.bs.modal
ausgelöst wird.
$(document).on('show.bs.modal', '.modal', function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
- Dies funktioniert für alle
.modal
auf der Seite erstellten (auch für dynamische Modalitäten).
- Der Hintergrund überlagert sofort das vorherige Modal
Wenn Ihnen der fest codierte Z-Index aus irgendeinem Grund nicht gefällt, können Sie den höchsten Z-Index auf der Seite folgendermaßen berechnen :
var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
return +el.style.zIndex;
})) + 10;
Korrektur der Bildlaufleiste
Wenn Ihre Seite ein Modal enthält, das die Browserhöhe überschreitet, können Sie beim Schließen eines zweiten Modals nicht darin scrollen. Um dies zu beheben, fügen Sie hinzu:
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
Versionen
Diese Lösung wurde mit Bootstrap 3.1.0 - 3.3.5 getestet
.not(this)
in der zweiten Zeile hinzugefügt ), damit es mit Bootstrap Datepicker funktioniertvar zIndex = 1040 + (10 * $('.modal:visible').not(this).length);
Mir ist klar, dass eine Antwort akzeptiert wurde, aber ich empfehle dringend, Bootstrap nicht zu hacken, um dies zu beheben.
Sie können den gleichen Effekt ziemlich einfach erzielen, indem Sie die Ereignishandler für die angezeigten.bs.modal- und hidden.bs.modal-Ereignisse einbinden und dort den Z-Index anpassen.
Hier ist ein Arbeitsbeispiel
Ein bisschen mehr Infos gibt es hier.
Diese Lösung funktioniert automatisch mit beliebig tief gestapelten Modalen.
Der Skript-Quellcode:
quelle
Eine kürzere Version, die auf dem Vorschlag von Yermo Lamers basiert, scheint in Ordnung zu sein. Selbst mit grundlegenden Animationen wie Ein- / Ausblenden und sogar verrückten Batman-Zeitungen drehen. http://jsfiddle.net/ketwaroo/mXy3E/
quelle
modal-open
Klasse auf dem body-Element wiederherstellen : jsfiddle.net/vkyjocynAls ich die Antwort von A1rPun mit dem Vorschlag von StriplingWarrior kombinierte, kam ich auf Folgendes:
Funktioniert auch für dynamische Modalitäten, die nachträglich hinzugefügt wurden, und behebt das Problem mit der zweiten Bildlaufleiste. Das Bemerkenswerteste, für das ich dies nützlich fand, war die Integration von Formularen in Modalitäten mit Validierungsfeedback von Bootbox-Warnungen, da diese dynamische Modalitäten verwenden und Sie das Ereignis daher eher an ein Dokument als an .modal binden müssen, da es nur an vorhandene angehängt wird Modalitäten.
Geige hier.
quelle
Ich habe ein Bootstrap-Plugin erstellt, das viele der hier veröffentlichten Ideen enthält.
Demo auf Bootply: http://www.bootply.com/cObcYInvpq
Github: https://github.com/jhaygt/bootstrap-multimodal
Es wird auch das Problem mit aufeinanderfolgenden Modalitäten behoben, die dazu führen, dass der Hintergrund immer dunkler wird. Dadurch wird sichergestellt, dass jeweils nur ein Hintergrund sichtbar ist:
Der Z-Index des sichtbaren Hintergrunds wird sowohl bei
show.bs.modal
als auch beihidden.bs.modal
Ereignissen aktualisiert :quelle
Beim Lösen von Stapelmodal-Bildlaufblättern auf der Hauptseite beim Schließen stellte ich fest, dass neuere Versionen von Bootstrap (zumindest seit Version 3.0.3) keinen zusätzlichen Code zum Stapeln von Modalen benötigen.
Sie können Ihrer Seite mehr als ein Modal hinzufügen (natürlich mit einer anderen ID). Das einzige Problem beim Öffnen von mehr als einem Modal ist, dass beim Schließen eines Modals die
modal-open
Klasse für den Body Selector entfernt wird.Sie können den folgenden Javascript-Code verwenden, um Folgendes erneut hinzuzufügen
modal-open
:Für den Fall, dass der Hintergrundeffekt für das gestapelte Modal nicht benötigt wird, können Sie einstellen
data-backdrop="false"
.Version 3.1.1. Der modale Hintergrund, der die Bildlaufleiste des Modals überlagert, wurde korrigiert . Die obige Lösung scheint jedoch auch mit früheren Versionen zu funktionieren.
quelle
Endlich gelöst. Ich habe es auf viele Arten getestet und funktioniert gut.
Hier ist die Lösung für alle, die das gleiche Problem haben: Ändern Sie die Funktion Modal.prototype.show (unter bootstrap.js oder modal.js).
VON:
ZU:
Es ist der beste Weg, den ich gefunden habe: Überprüfen Sie, wie viele Modalitäten geöffnet sind, und ändern Sie den Z-Index des Modals und des Hintergrunds auf einen höheren Wert.
quelle
Wenn Sie nach einer Bootstrap 4-Lösung suchen, gibt es eine einfache Lösung mit reinem CSS:
quelle
Versuchen Sie, Ihrem JS beim Booten Folgendes hinzuzufügen
Erläuterung:
Nachdem ich mit den Attributen herumgespielt habe (mit dem Entwicklertool von Chrome), habe ich festgestellt, dass jeder der folgenden
z-index
Werte1031
die Dinge hinter den Hintergrund stellt.Durch die Verwendung der modalen Ereignis-Handles von Bootstrap habe ich das
z-index
auf gesetzt1030
. Wenn#myModal2
angezeigt wird und setzen Sie denz-index
Rücken auf1040
if#myModal2
ist versteckt.Demo
quelle
Jedes Mal, wenn Sie die Funktion sys.showModal ausführen, erhöhen Sie den Z-Index und setzen Sie ihn auf Ihr neues Modal.
quelle
Die Lösung für dieses Problem bestand für mich darin, die "Fade" -Klasse NICHT für meine modalen Divs zu verwenden.
quelle
Keine Skriptlösungen, die nur CSS verwenden, vorausgesetzt, Sie haben zwei Modalebenen, setzen das 2. Modal auf einen höheren Z-Index
quelle
Wenn Sie möchten, dass ein bestimmtes Modal über einem anderen offenen Modal angezeigt wird, fügen Sie den HTML-Code des obersten Modals nach dem anderen Modal hinzu
div
.Das hat bei mir funktioniert:
quelle
Meine Lösung für Bootstrap 4, die mit unbegrenzter Modaltiefe und dynamischem Modal arbeitet.
quelle
Jedes Modal sollte eine andere ID erhalten und jeder Link sollte auf eine andere Modal-ID ausgerichtet sein. Also sollte es so etwas sein:
quelle
BEARBEITEN: Bootstrap 3.3.4 hat dieses Problem (und andere modale Probleme) gelöst. Wenn Sie also Ihr Bootstrap-CSS und JS aktualisieren können, ist dies die beste Lösung. Wenn Sie die unten stehende Lösung nicht aktualisieren können, funktioniert sie weiterhin und funktioniert im Wesentlichen genauso wie Bootstrap 3.3.4 (Neuberechnung und Anwenden von Padding).
Wie Bass Jobsen betonte, haben neuere Versionen von Bootstrap den Z-Index gelöst. Die Modal-Open-Klasse und das Padding-Recht waren für mich immer noch Probleme, aber dieses von der Lösung von Yermo Lamers inspirierte Skript löst es. Legen Sie es einfach in Ihrer JS-Datei ab und genießen Sie.
quelle
Schau dir das an! Diese Lösung löste das Problem für mich, einige einfache CSS-Zeilen:
Hier ist ein Link, wo ich es gefunden habe: Bootply Stellen Sie einfach sicher, dass das .modual, das oben angezeigt werden muss, im HTML-Code an zweiter Stelle steht, damit CSS es als "gerade" finden kann.
quelle
Arbeit für Open / Close-Multimodale
Demo
https://www.bootply.com/cObcYInvpq#
quelle
Hier sind einige CSS mit
nth-of-type
Selektoren, die zu funktionieren scheinen:Bootply: http://bootply.com/86973
quelle
Ich hatte ein ähnliches Szenario und nach ein wenig Forschung und Entwicklung fand ich eine Lösung. Obwohl ich in JS nicht besonders gut bin, habe ich es dennoch geschafft, eine kleine Abfrage aufzuschreiben.
http://jsfiddle.net/Sherbrow/ThLYb/
quelle
Fügen Sie eine globale Variable in modal.js hinzu
// Funktion in Variable hinzufügen anzeigen - Modal.prototype.backdrop
quelle
Die anderen Lösungen haben bei mir nicht sofort funktioniert. Ich denke, vielleicht, weil ich eine neuere Version von Bootstrap (3.3.2) verwende ... das Overlay wurde oben im modalen Dialogfeld angezeigt.
Ich habe den Code ein wenig überarbeitet und den Teil auskommentiert, der den modalen Hintergrund anpasste. Dies hat das Problem behoben.
Wenn Sie dies in AngularJs verwenden möchten, fügen Sie den Code einfach in die .run () -Methode Ihres Moduls ein.
quelle
Leider habe ich nicht den Ruf, einen Kommentar abzugeben, aber es sollte beachtet werden, dass die akzeptierte Lösung mit der fest codierten Basislinie eines 1040-Z-Index der zIndex-Berechnung überlegen zu sein scheint, die versucht, den maximalen zIndex zu finden, der auf der Seite gerendert wird.
Es scheint, dass bestimmte Erweiterungen / Plugins auf DOM-Inhalten der obersten Ebene basieren, was die .Max-Berechnung zu einer so obszön großen Zahl macht, dass der zIndex nicht weiter erhöht werden kann. Dies führt zu einem Modal, bei dem das Overlay falsch über dem Modal angezeigt wird (wenn Sie Firebug / Google Inspector-Tools verwenden, wird ein zIndex in der Größenordnung von 2 ^ n - 1 angezeigt).
Ich konnte nicht herausfinden, aus welchem Grund die verschiedenen Formen von Math.Max für z-Index zu diesem Szenario führen, aber es kann vorkommen, dass es für einige Benutzer eindeutig erscheint. (Bei meinen allgemeinen Tests auf dem Browserstack funktionierte dieser Code perfekt).
Hoffe das hilft jemandem.
quelle
In meinem Fall wurde das Problem durch eine Browsererweiterung verursacht, die die Dateien bootstrap.js enthält, in denen das Show-Ereignis zweimal behandelt und zwei
modal-backdrop
Divs hinzugefügt wurden. Beim Schließen des Modals wird jedoch nur eine davon entfernt.Es wurde festgestellt, dass durch Hinzufügen eines Haltepunkts für die Änderung eines Teilbaums zum Body-Element in Chrome verfolgt und das Hinzufügen der
modal-backdrop
Divs verfolgt wurde.quelle
quelle
Update: 22.01.2019, 13.41 Ich habe die Lösung von jhay optimiert, die auch das Schließen und Öffnen gleicher oder unterschiedlicher Dialoge unterstützt, wenn beispielsweise von einem Detail zum nächsten vorwärts oder rückwärts gewechselt wird.
quelle
Für mich haben diese einfachen scss-Regeln perfekt funktioniert:
Wenn diese Regeln dazu führen, dass in Ihrem Fall das falsche Modal oben steht, ändern Sie entweder die Reihenfolge Ihrer Modal-Divs oder ändern Sie (ungerade) in (gerade) in den obigen scss.
quelle
Überprüfen Sie die Anzahl der Modalitäten und fügen Sie den Wert als Z-Index zum Hintergrund hinzu
quelle