Mehrere modals overlay
Muss ich, dass das overlay zeigt oben die erste modale, nicht in den Rücken.
JS:
$('#openBtn').click(function(){
$('#myModal').modal({show:true})
});
HTML:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog /modal goes here.
<br>
<br>
<br>
<br>
<br>
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Second Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog /modal goes here.
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
Habe ich versucht zu ändern z-index
von .modal-backdrop
, aber es wird ein Chaos.
In einigen Fällen habe ich mehr als zwei modals auf der gleichen Seite.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nachdem ich viele Updates für dieses, und keiner von Ihnen waren genau das, was ich brauchte, ich habe kam eine noch kürzere Lösung, die inspiriert ist durch @YermoLamers & @Ketwaroo.
Hintergrund z-index fix
Diese Lösung verwendet eine
setTimeout
weil die.modal-backdrop
wird nicht erstellt, wenn das Ereignisshow.bs.modal
ausgelöst wird..modal
auf der Seite erstellt (auch dynamische Modelle) einstellenBeispiel jsfiddle
Wenn Sie nicht wie die hardcoded z-index aus irgendeinem Grund können Sie berechnen Sie den höchsten z-index auf der Seite, wie diese:
Scrollbar-fix
Wenn Sie ein modal auf Ihrer Seite, die über das browser-Höhe, dann kann man nicht scrollen, wenn das schließen eines zweiten modal. Um dies zu beheben hinzuzufügen:
Versionen
Diese Lösung ist getestet mit bootstrap 3.1.0 - 3.3.5
.not(this)
zu der zweiten Zeile) zu bekommen, es funktioniert mit bootstrap-datepickervar zIndex = 1040 + (10 * $('.modal:visible').not(this).length);
Merke ich eine Antwort akzeptiert wurde, aber ich empfehle dringend, nicht hacken bootstrap, dies zu beheben.
Können Sie sehr einfach den gleichen Effekt erzielen, durch Einhaken der gezeigt.bs.modal-und ausgeblendet.bs.modal-event-Handler und die Anpassung der z-index gibt.
Hier ist ein funktionierendes Beispiel
Ein bisschen mehr info ist zur Verfügung hier.
Diese Lösung funktioniert automatisch mit beliebig tief stapeln modals.
Den Quellcode des Skripts:
$(document).on('---event---', '.modal', function() ...
statt$('.modal').on('---event---', ...)
weil der Inhalt gerendert wurde, nachdem die document-ready-event.Etwas kürzere version, basierend auf Yermo Lamers' Vorschlag, dies scheint zu funktionieren gut. Auch mit basic-Animationen wie fade in/out und sogar verrückt batman Zeitung drehen. http://jsfiddle.net/ketwaroo/mXy3E/
modal-open
Klasse auf dem body-element: jsfiddle.net/vkyjocynKombination A1rPun Antwort mit dem Vorschlag von StriplingWarrior, ich kam mit dieser:
Funktioniert auch für dynamische modals Hinzugefügt, nach der Tat, und entfernt die zweite-scrollbar-Problem. Die bemerkenswerteste Sache, die ich fand dies nützlich für die war die Integration von Formen im inneren modals mit Validierungs-feedback von Bootbox-Benachrichtigungen, da diese die Verwendung dynamischer modals und so erfordern Sie zu binden, das Ereignis zu dokumentieren, anstatt zu .modal ist, weil diese nur fügt es zu der bestehenden modals.
Geige hier.
Erstellte ich ein Bootstrap-plugin, das enthält eine Menge der Ideen, die hier gepostet.
Demo auf Bootply: http://www.bootply.com/cObcYInvpq
Github: https://github.com/jhaygt/bootstrap-multimodal
Es behebt auch das Problem mit aufeinanderfolgenden modals wodurch der hintergrund dunkler und dunkler. Dadurch wird sichergestellt, dass nur eine Kulisse ist zu jeder Zeit sichtbar:
Den z-index des sichtbaren hintergrund aktualisiert, auf die sowohl die
show.bs.modal
undhidden.bs.modal
Veranstaltungen:Bei der Lösung Stapeln modals scrollt die Hauptseite, wenn man geschlossen ist ich fand, dass neuere Versionen des Bootstrap (zumindest seit version 3.0.3) benötigen keine zusätzliche code-stack modals.
Können Sie hinzufügen, mehr als eine modale (natürlich mit einer anderen ID) auf Ihrer Seite. Das einzige Problem gefunden, beim öffnen von mehr als einer modalen werden, dass die Schließung ein entfernen der
modal-open
Klasse für den body-Selektor.Können Sie den folgenden Javascript-code zu re-add die
modal-open
:In dem Fall, dass brauchen nicht die Kulisse Wirkung für die gestapelt modale Sie können
data-backdrop="false"
.Version 3.1.1. Feste Fix modal hintergrund überlagerung der modalen s-Bildlaufleiste, aber die oben genannte Lösung scheint auch zu funktionieren mit früheren Versionen.
Endlich gelöst. Getestet habe ich es in vielerlei Hinsicht und funktioniert einwandfrei.
Hier ist die Lösung für alle, die das gleiche problem haben:
Ändern Sie die Modal.der Prototyp.zeigen - Funktion (bei bootstrap.js oder modal.js)
AUS:
ZU:
Es ist der beste Weg, die ich gefunden habe: überprüfen Sie, wie viele modals geöffnet werden und ändern Sie den z-index der modal-und der hintergrund zu einem höheren Wert.
Versuchen Sie, den folgenden, um Ihre JS auf bootply
Erklärung:
Nach Herumspielen mit den Parametern(mit Chrome dev tool), habe ich realisiert, dass alle
z-index
Wert unter1031
wird, die Dinge hinter den kulissen.Also durch die Verwendung von bootstrap-modal Ereignis-handles, die ich den
z-index
zu1030
. Wenn#myModal2
angezeigt wird, und legen Sie diez-index
zurück1040
wenn#myModal2
versteckt ist.Demo
Jedes mal, wenn Sie ausführen, sys.showModal Funktion increment z-index und legen Sie es auf Ihrem neuen modal.
Jede modale gegeben werden sollte, eine andere id und jeder link sollte angestrebt werden, um einen anderen modal-id. So sollte es sein, etwas wie das:
Die Lösung für mich war NICHT der "fade" - Klasse auf meinem modal divs.
EDIT: Bootstrap 3.3.4 hat dieses problem (und andere modal-Themen) also, wenn Sie aktualisieren Sie Ihre bootstrap CSS-und JS-das wäre die beste Lösung. Wenn Sie nicht aktualisieren Sie die Lösung unten funktioniert auch noch und tut im wesentlichen das gleiche wie bootstrap 3.3.4 (neu berechnen und anwenden Polsterung).
Als Bass Jobsen wies in neueren Versionen von Bootstrap haben den z-index gelöst. Der modal-offene Klasse und padding-right waren noch immer Probleme für mich, aber diese Drehbücher, inspiriert von Yermo Lamers-Lösung löst. Legen Sie es einfach in Ihre JS-Datei und genießen.
Arbeit für die open/close multi modals
Demo
https://www.bootply.com/cObcYInvpq#
Wenn Sie auf der Suche für die Bootstrap-4-Lösung, die es leicht mit reinem CSS:
Hier einige CSS mit
nth-of-type
Selektoren, die zu funktionieren scheint:Bootply: http://bootply.com/86973
Ich hatte ein ähnliches Szenario, und nach ein wenig R&D ich habe eine Lösung gefunden. Ich bin zwar nicht großartig in JS noch ich haben es geschafft, zu schreiben Sie eine kleine Abfrage.
http://jsfiddle.net/Sherbrow/ThLYb/
Hinzufügen von globalen Variablen in modal.js
//show Funktion in variable hinzufügen - Modal.der Prototyp.hintergrund
Die anderen Lösungen haben bei mir nicht funktioniert out of the box. Ich denke, vielleicht, weil ich bin mit einer neueren version von Bootstrap (3.3.2).... die überlagerung erscheinen oben das modale Dialogfeld.
Umgestalteten ich den code ein bisschen und kommentiert, dass der Teil wurde die Einstellung der modal-Kulisse. Diese behoben das Problem.
Als eine Randnotiz, wenn Sie möchten, dies zu nutzen, AngularJs, setzen Sie einfach den code im inneren des Moduls .die run () - Methode.
Leider habe ich nicht den Ruf, zu kommentieren, aber es sollte angemerkt werden, dass die akzeptierte Lösung mit den hardcoded Grundlinie a 1040 z-index scheint überlegen zu sein, um den zIndex-Berechnung, die versucht, die maximale zIndex gerendert wird, auf der Seite.
Scheint es, dass bestimmte Erweiterungen/plugins verlassen Sie sich auf top-level-DOM-Inhalt der das macht .Max Berechnung solch einem obszön großen Zahl, dass Sie können nicht erhöhen den zIndex nicht weiter. Dies führt zu einer modalen, wo das overlay wird über die modal falsch (wenn du Firebug/Google-Inspektor-tools, die Sie werden sehen, ein zIndex in der Größenordnung von 2^n - 1)
Habe ich noch nicht in der Lage zu isolieren, was der spezifische Grund dafür, die verschiedenen Formen der Mathematik.Max z-Index führt zu diesem Szenario, aber es kann passieren, und es wird scheinen einzigartig zu wenige Benutzer. (Meine Allgemeine tests auf browserstack hatte dieser code funktioniert perfekt).
Hoffe, das jemand hilft.
In meinem Fall das problem verursacht wurde, indem eine browser-Erweiterung, die enthält die bootstrap.js Dateien, in denen die Veranstaltung behandelt zweimal und zwei
modal-backdrop
divs Hinzugefügt, aber beim schließen des modal-nur einer von Ihnen entfernt.Festgestellt, dass durch das hinzufügen einer Unterstruktur, die änderung Haltepunkt für das body-element in Chrom und verfolgt das hinzufügen der
modal-backdrop
divs.Check this out! Diese Lösung das problem bei mir gelöst, einige einfache CSS Zeilen:
Hier ist ein link wo ich es gefunden: Bootply
Stellen Sie nur sicher, dass die .modual müssen, erscheinen an der Spitze-zweite im HTML-code, so kann CSS als "selbst".
Kein script-Lösungen , die nur mithilfe von css gegeben, Sie haben zwei Schichten von modals, set der 2. modal zu einem höheren z-index
Update: 22.01.2019, 13.41
Optimiert habe ich die Lösung von jhay, die auch unterstützt öffnen und schließen, um gleiche oder verschiedene Dialoge, wenn zum Beispiel übergang von einem detail von Daten zu einem anderen vorwärts oder rückwärts.
Für mich, diese einfachen scss Regeln funktionierte perfekt:
Wenn diese Regeln bewirken, dass der falsche modal an der Spitze zu sein in deinem Fall, ändern Sie die Reihenfolge der modal divs zu ändern, oder (ungerade) (auch) in oben scss.
bitte befolgen Sie die Anweisungen
1. zuerst geben Sie keine id, um Ihre modalen popup, die Sie wollen, zu geben, perioty eX: id='testmodal'
2. Im Stil können Sie verunreinigen eine css wie unten, Wert 2147483647 ist der höchste Wert, den Sie geben kann, als ein z-index.
diese css-Klasse gelten, die auf Ihre modal in denen Sie sich bewerben möchten,da es das erste search-id=testmodal
wenn Sie mehr als ein popup-dann können Sie "z-index", wie pro Ihre Priorität ,"bedeuten eine höhere Priorität erhalten höheren z-index-Wert