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?
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:
</body>
.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.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.