El modal de Bootstrap aparece bajo el fondo

He utilizado el código para mi modal directamente desde el ejemplo de Bootstrap, y he incluido sólo el bootstrap.js (y no bootstrap-modal.js). Sin embargo, mi modal aparece debajo del fundido gris (fondo) y no es editable.

Esto es lo que parece:

Ver [este fiddle][2] para una forma de reproducir este problema. La estructura básica de ese código es así:

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>
body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

¿Alguna idea de por qué es esto o qué puedo hacer para solucionarlo?

Muhd
Pregunta editada 22º noviembre 2014 в 12:09
Programación
modal-dialog javascript css twitter-bootstrap
17º mayo 2012 в 1:27
34 vistas
Solución

Si el contenedor modal tiene una posición fija o relativa o está dentro de un elemento con posición fija o relativa se producirá este comportamiento.

Asegúrate de que el contenedor modal y todos sus elementos padre están posicionados de la forma predeterminada para solucionar el problema.

Aquí hay un par de maneras de hacer esto:

  1. La forma más fácil es mover el div modal para que esté fuera de cualquier elemento con posicionamiento especial. Un buen lugar podría ser justo antes de la etiqueta de cierre del cuerpo ``.
  2. Alternativamente, puedes eliminar las propiedades CSS position: del modal y sus ancestros hasta que el problema desaparezca. Sin embargo, esto podría cambiar el aspecto y el funcionamiento de la página.
Muhd
Respuesta editada 18º junio 2014 в 9:12
Comentarios (17)

El problema tiene que ver con el posicionamiento de los contenedores padre. Puedes fácilmente "mover" tu modal fuera de estos contenedores antes de mostrarlo. Aquí'es cómo hacerlo si estuvieras mostrando tu modal usando js:

$('#myModal').appendTo("body").modal('show');

O, si lanzas el modal usando botones, suelta el .modal('show'); y simplemente hazlo:

$('#myModal').appendTo("body")

Esto mantendrá toda la funcionalidad normal, permitiéndole mostrar el modal usando un botón.

leandrotk
Respuesta editada 7º diciembre 2015 в 5:11
Comentarios (15)

Conseguí que funcionara dando un valor alto de z-index a la ventana modal después de abrirla. Por ejemplo:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
Comentarios (10)