javascript - pagina - modals js

Twitter Bootstrap: ¿por qué mi modal está tan difuminado como el fondo?

Question

Así que estoy usando Twitter Bootstrap y tengo un modo que se desliza hacia abajo cuando el usuario hace clic en el botón "Registrar".

El único problema es que no solo se desvanece la página de fondo, lo que es un buen efecto, sino que también se desvanece el modal. ¿Cómo puedo obtenerlo para que el modal sea de brillo normal mientras el fondo está difuminado?

Creé un JSFiddle para demostrar mi problema aquí: http://jsfiddle.net/jononomo/7z8RZ/7/

El siguiente código crea un modal desvanecido:

<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 : si quito el div exterior, entonces todo funciona bien. Entonces, el problema es que el código para el modal está dentro de las siguientes líneas:

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

Por supuesto, no quiero eliminar ese div, ya que quiero que el botón del enlace que inicia el modal esté en la barra de navegación que está fijo en la parte superior de la pantalla.

Edición : Lo he reducido al hecho de que el div exterior es de la clase navbar-fixed-top . Cuando elimino esa etiqueta, todo funciona como se esperaba. Puede verlo funcionar correctamente aquí: http://jsfiddle.net/jononomo/7z8RZ/8/ Por supuesto, me gustaría que la barra de navegación se fije en la parte superior, así que Esto no resuelve mi problema.

Answer 1

Desafortunadamente, la respuesta aquí no me ayudó ... pero afortunadamente esta discusión tiene el mismo problema y tienen una respuesta útil que funcionó para mí. Básicamente, debes asegurarte de que el modal no esté heredando ningún elemento de posicionamiento extraño de los divs principales:

Modal Bootstrap que aparece debajo del fondo

Answer 2

La forma en que lo resolví fue envolviendo todo dentro del modal dentro de una <div class="modal-content"> . Parecía algo como esto:

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

Sin el div de modal-content , el modal terminó siendo tan gris como el fondo.

Answer 3

Verifique este problema en el repositorio de git de Bootstrap.

A continuación, intente poner el modal antes de la barra de navegación, como este violín .

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

En