Twitter Bootstrap - Warum ist mein Modal so verblasst wie der Hintergrund?

Question

Also ich benutze Twitter Bootstrap und ich habe ein Modal, das nach unten fährt, wenn der Benutzer auf die Schaltfläche "Registrieren" klickt.

Das einzige Problem ist, dass nicht nur die Hintergrundseite verblasst, was ein schöner Effekt ist, sondern auch das Modal verblasst ist. Wie bekomme ich es, dass das Modal normale Helligkeit hat während der Hintergrund verblasst ist?

habe ich ein JSFiddle mein Problem hier zu demonstrieren: http://jsfiddle.net/jononomo/7z8RZ/7/

Der folgende Code erstellt ein verwaschenes modal:

<div class="navbar navbar-fixed-top"> 
    <a href="#registration_modal" data-toggle="modal"> 
     Register 
    </a> 
    <div id="registration_modal" class="modal hide fade"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">×</button> 
       <h3 id="myModalLabel">Register An Account</h3> 
     </div> 

     <div class="modal-body"> 
      Registration form goes here. 
     </div> 

     <div class="modal-footer"> 
      <button class="btn btn-secondary" data-dismiss="modal">Cancel</button> 
      <button class="btn btn-primary">Register</button> 
     </div> 

    </div> 
</div> 

Hinweis: Wenn ich die äußere div entfernen, dann fein alles funktioniert. Das Problem ist also, dass der Code für die Modal innerhalb der folgenden Zeilen ist:

<div class="navbar navbar-fixed-top"> 
</div> 

Natürlich will ich nicht, dass die div entfernen, da mag ich den Knopf auf den Link, der Modal startet in der seine Navigationsleiste, die am oberen Bildschirmrand fixiert ist.

Bearbeiten: Ich habe es auf die Tatsache eingegrenzt, dass das äußere Div der Klasse navbar-fixed-top ist. Wenn ich dieses Tag entferne, funktioniert alles wie erwartet - Sie können sehen, dass es hier richtig funktioniert: http://jsfiddle.net/jononomo/7z8RZ/8/ Natürlich möchte ich die Navbar an der Spitze befestigt werden, so dass dies mein Problem nicht löst.

Answer 1

Überprüfen Sie this issue auf dem Bootstrap-Git-Repository.

Dann versuchen Sie, das modal vor der Navbar, wie this fiddle.

<div id="registration_modal" class="modal hide fade"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
     <h3>Register An Account</h3> 
    </div> 

    <div class="modal-body"> 
     Registration form goes here. 
    </div> 

    <div class="modal-footer"> 
     <button class="btn btn-secondary" data-dismiss="modal">Cancel</button> 
     <button class="btn btn-primary">Register</button> 
    </div> 

</div> 
<div class="navbar navbar-fixed-top"> 
    <a href="#registration_modal" data-toggle="modal"> 
     Register 
    </a>  
</div> 

Answer 2

Leider hier die Antwort half mir nicht .. aber zum Glück dieser Diskussion hat das gleiche Problem, und sie haben eine hilfreiche Antwort, die für mich gearbeitet. Grundsätzlich müssen Sie sicherstellen, dass die modale keine seltsame Positionierungselemente von den Eltern divs erbt:

Bootstrap modal appearing under background

Answer 3

Die Art und Weise, dass ich es gelöst war, indem sie alles in der modal in einem <div class="modal-content"> Tag wickeln. Es sah so etwas wie dieses:

<div class="modal fade" id="TestModal"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      Modal header here 
     </div> 
     <div class="modal-body"> 
      <p>Modal content here</p> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
</div> 

Ohne die modal-content div endete die modal genauso grau wie der Hintergrund ist nach oben.