Bootstrap su Twitter - perché il mio modal è sbiadito come sfondo?

Question

Quindi sto usando Twitter Bootstrap e ho una modal che scorre verso il basso quando l'utente fa clic sul pulsante "Registrati".

L'unico problema è che non solo la pagina di sfondo si dissolve, che è un bell'effetto, ma anche il modale è sbiadito. Come posso ottenere in modo che il modale è la luminosità normale mentre lo sfondo è sbiadito?

ho creato un JSFiddle per dimostrare il mio problema qui: http://jsfiddle.net/jononomo/7z8RZ/7/

Il codice seguente crea un modale sbiadita:

<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> 

Nota: se mi tolgo la div esterno, quindi tutto funziona bene. Quindi il problema è che il codice per il modale è entro le seguenti linee:

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

Certo che non voglio per rimuovere tale div, perché voglio il pulsante il link che lancia il modale di essere in barra di navigazione fissata nella parte superiore dello schermo.

Modifica: l'ho ristretto al fatto che il div esterno è della classe navbar-fixed-top. Quando rimuovo quel tag, tutto funziona come previsto - puoi vederlo funzionare correttamente qui: http://jsfiddle.net/jononomo/7z8RZ/8/ Ovviamente, vorrei che la barra di navigazione fosse fissata in alto, quindi questo non risolve il mio problema.

Answer 1

Controllare this issue nel repository git Bootstrap.

Quindi provare a mettere il modale prima della barra di spostamento, come 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

Purtroppo la risposta qui non mi aiuterà .. ma per fortuna questa discussione ha lo stesso problema e hanno una risposta utile che ha lavorato per me. In sostanza, è necessario assicurarsi che il modale non eredita elementi di posizionamento strani da div genitore:

Bootstrap modal appearing under background

Answer 3

Il modo in cui ho risolto era avvolgendo tutto all'interno del modale all'interno di un tag <div class="modal-content">. Sembrava qualcosa di simile:

<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> 

Senza i modal-content div, il modal ha finito per essere altrettanto grigio come il background.