Ich habe ein Problem mit meinem Twitter Bootstrap Modal: Es öffnet sich vor meinem Formular. Ich habe keine Ahnung von dem was ich gemacht habe, weil es vor 3 Tagen sehr gut funktioniert hat. Ich kann auf das Formular schreiben; Ich denke, das Formular funktioniert. Das Problem ist die modale Öffnung vor dem Formular.Twitter Bootstrap Modal öffnet sich vor Form
Die .modal-backdrop Klasse Z-Index bis 1040 gesetzt und die navbar-fixed-top hat z-Index auf 1030. Daher sind die Kulisse zeigt über die Form.
Überschreiben Sie den Z-Indexwert .modal-backdrop in Ihrer CSS-Datei, indem Sie ihn auf einen Wert einstellen, der kleiner als der Z-Index der Navigationsleiste ist. Dies wird das Problem beheben.
Awesome - rettete mir eine Menge Zeit. – eandersson
3 Monate hinter diesem Problem, und jetzt habe ich es für mich gelöst !!! Vielen Dank!!!! – Lvkz
Ich hatte ähnliche Probleme. Ich habe adressierte sie hier: http://jsfiddle.net/ATeaH/8/
Um diese Lösung zusammenzufassen, fügen Sie hinzu: $ ('.modal) .appendTo (' body '); zu deinem Skript. Dies verschiebt den .modal (wo auch immer er definiert wurde) nach wo .modal-backdrop wird automatisch durch Bootstrap generiert, wodurch die 2 Elemente Geschwister bilden, was z-index Probleme beheben kann – rmirabelle
Eine einfache Lösung, die Nielsen erwähnt, über der für mich gearbeitet ...
Ich hatte das div lege ich meine modal innerhalb der navbar. Ich bewegte die div außerhalb der Navbar - bis knapp unter der <body>
Problem gelöst!
Ich hatte ein ähnliches Problem, wo ein Modal über AJAX in das DOM eingefügt wurde. Ohne eine Seitenaktualisierung blieb das Modal hinter einer Maske und war nicht zugänglich.
Interessanterweise funktionierte das Modal gut mit einer Seitenaktualisierung. Obwohl ich das Modal an der gleichen Stelle mit AJAX wie mit HTML eingefügt habe, würde es mit AJAX nicht funktionieren. Meine Lösung war, den Modal Partial an den Körper anzuhängen. So war mein Code wie folgt vor:
$('body').append(....j render partial....);
ich einige der anderen Vorschläge versucht, stieß ich auf (wie die z-index Tweaking), aber das hat nicht in meinem Fall zu helfen.
Ich hatte das gleiche Problem. In meinem Fall war es wegen eines nicht geschlossenen div in meinem Header.
diese Lösung versuchen, es für mich gearbeitet:
$('#myModal').appendTo("body").modal('show');
ich mit AngularJS gerade arbeite und lief in das gleiche Problem. Um zu verdeutlichen, war mein Modal in einer anderen HTML-Datei, die Angular während der Laufzeit durch ng-view in das DOM injiziert. Was dieses Problem für mich verursachte, war, dass ich eine CSS-Animationsklasse auf dem Div hatte, wo meine ng-view war. Beispiel:
<div ng-app="myApp">
<div class="pageTransition" ng-view></div> <!-- problem: class="pageTransition"-->
</div>
Durch das Entfernen der CSS-Klasse wurde das Problem behoben und mein Modal wieder in den normalen Betriebszustand versetzt. Eine Lösung wäre, die Standardklasse durch Angulars ng-class zu ersetzen. Auf diese Weise können Sie eine Klasse dynamisch hinzufügen, ändern oder entfernen, während Sie das Modal verwenden.
Fügen Sie den folgenden Code zu Ihrem CSS
.modal-dialog {
z-index: 1050;
}
Wenn Sie SASS verwenden Sie die folgende innerhalb _modals tun können.scss:
.modal-dialog {
position: relative;
z-index: $zindex-modal-background; // copy-pasted z-index from .modal-backdrop
width: auto;
margin: 10px;
}
Fügen Sie etwas Code ein, damit wir einen Blick darauf werfen können. –
Scheint wie ein Z-Index-Problem, aber ohne Code und keine Beispiele ist es unmöglich zu sagen –
Meine Schuld, ich habe es bereits behoben! danke –