Bootstrap modal wird wegen der positionierten navbar schwarz geschwärzt

Wenn mein Bootstrap Modal angezeigt wird, sieht es so aus, als wäre es hinter dem schwarzen Hintergrund. Wenn Sie auf eine beliebige Stelle auf dem Bildschirm klicken, verschwindet das Modal.Bootstrap modal wird wegen der positionierten navbar schwarz geschwärzt

Das Problem scheint durch die Positionierung meine navbar verursacht werden - Entfernen position: absolute; oder position: relative; behebt es. Leider, da ich den Z-Index auf der Navbar verwenden muss, kann ich die Positionierung nicht loswerden.

Warum bewirkt die Positionierung der Navbar, dass das Modal geschwärzt wird? Gibt es eine Möglichkeit, das Modal vor dem Hintergrund erscheinen zu lassen, während die Positionierung auf der Navigationsleiste beibehalten wird?

Quelle

2013-01-03 yndolok

Welchen Z-Index haben Sie auf Ihrer Navbar? es sieht für mich aus wie der modale Hintergrund 1040 verwendet und das Modal 1050 verwendet –

Könnten Sie uns ein Beispiel dafür zeigen, dass es nicht funktioniert [jsfiddle (fork it first)] (http://jsfiddle.net/Sherbrow/x2Skz/) beispielsweise ? Die '.navbar' sollte nicht in den modalen' z-index' eingreifen. – Sherbrow

@Sherbrow: Hier ist ein Geigenbeispiel: http://jsfiddle.net/yndolok/pQgNZ/2/. Der Z-Index auf der Navigationsleiste ist 2. – yndolok

Es ist, weil Ihr modal innen ist Ihr #nav_inner<div> so wird es einige Styling erben, die Sie nicht wollen, es zu.

Es muss nicht da sein.

Versuchen Sie es in den Körper bewegen, wie unten:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
</head> 
<body> 
    <div class="gutter" id="left_gutter"></div> 
    <div class="gutter" id="right_gutter"></div> 
    <div id="container"> 
     <div class="navbar"> 
      <div id="nav_inner"> 
       <div class="page" id="nav_page"> 
        <div class="content_wrapper"> 
         <div class="content"> 
        <a href="#add_topic_modal" role="button" data-toggle="modal" id="teach">Teach</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
     <div id="footer_inner"> 
     </div> 
    </div> 
        <div class="modal hide fade" id="add_topic_modal" tabindex="-1" role="dialog" aria-labelledby="add_lesson_label" aria-hidden="true"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
          <h3 id="add_lesson_label">Teach</h3> 
         </div> 
         <div class="modal-body"> 
         </div> 
         <div class="modal-footer"> 
          <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> 
         </div> 
        </div> 
</body> 
</html>

UPDATE: Dies ist eines der Themen waren ich in dem DOM die Elementposition wusste zu ändern wäre es zu beheben, aber das Verständnis ist die Ursache ein anderes Problem völlig.

Entfernen position: relative; z-index: 2; von beiden #navbar und #nav_inner behebt auch das Problem, so dass, obwohl die modale position: fixed; z-index: 1050; hat, wo z-Index nur mit einer Position und einer festen Position arbeitet legt das Element relativ zu dem Browserfenster, das war noch nicht Arbeiten aufgrund des Elternelements mit einer relativen Position und Z-Index ... Magie.

Der Grund dafür, dass der verblasste Hintergrund oben angezeigt wurde, war, dass er dem Körper mithilfe von Javascript hinzugefügt wurde. Daher hatte er keine Probleme mit dem korrekten Z-Index von 1040 und wurde über dem Modal platziert.

Quelle

2013-01-03 21:46:51 Pricey

Super, wie funktioniert es? – yndolok

siehe mein update :) – Pricey

Sehr gute Erklärung, Kumpel, ich war nicht in der Lage, dieses Problem selbst zu beheben, ich wusste, dass es wegen einer schlechten Elementposition im DOM war, löste diese Antwort nicht nur mein Problem, es erleuchte meine Sicht . – yeyo

Ich hatte das gleiche Problem. Aber als mein Gehalt von Ajax geladen wurde, war ich nicht in der Lage zu schaffen „modal“ vor dem Schließen

Also ich dies tat:

$(function(){ 
    $("#add_topic_modal").appendTo("body"); 
});

Und jetzt die „modal“ wie erwartet funktioniert.

Quelle

2014-03-16 21:31:16 jakobdo

Obwohl dies nicht die ideale Lösung ist, funktionierte es wie es sollte. – Milap

Bootstrap modal wird wegen der positionierten navbar schwarz geschwärzt

Antwort

Verwandte Themen