He usado el código para mi modal directamente desde el ejemplo de Bootstrap, y he incluido solo bootstrap.js (y no bootstrap-modal.js). Sin embargo, mi modal aparece debajo del desvanecimiento gris (fondo) y no es editable.
Así es como se ve:
Vea este violín 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?
javascript
css
twitter-bootstrap
modal-dialog
natlines
fuente
fuente
overflow-x: hiddenaplicado al contenedor del modal.Respuestas:
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úrese de que el contenedor modal y todos sus elementos principales estén colocados de la manera predeterminada para solucionar el problema.
Aquí hay un par de formas de hacer esto:
</body>.position:propiedades CSS del modal y sus antepasados hasta que el problema desaparezca. Sin embargo, esto podría cambiar la apariencia y el funcionamiento de la página.fuente
</body>ybodyno tiene ningúnpositionestilo de atributo. Alguna otra idea?El problema tiene que ver con el posicionamiento de los contenedores principales. Puede "mover" fácilmente su modal de estos contenedores antes de mostrarlo. Aquí le mostramos cómo hacerlo si estaba
showusando su modal usando js:O, si inicia modal usando botones, suelte
.modal('show');y simplemente haga:Esto mantendrá toda la funcionalidad normal, permitiéndole mostrar el modal usando un botón.
fuente
$('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })Probé todas las opciones proporcionadas anteriormente, pero no pude trabajar con ellas.
Qué funcionó: establecer el índice z del .modal-backdrop en -1.
fuente
z-index: 0;-1haría que aparezca detrás de otros elementos de la página, como los paneles. Pero configurarlo para3que esté por encima de todo, excepto la ventana emergente modal.Además, asegúrese de que la versión de BootStrap css y js sean las mismas. Las diferentes versiones también pueden hacer que aparezca modal en segundo plano:
Por ejemplo:
Malo:
Bueno:
fuente
También me he encontrado con este problema y ninguna de las soluciones me funcionó hasta que descubrí que en realidad no necesito un telón de fondo. Puede eliminar fácilmente el fondo con el siguiente código.
Nota : el
data-backdropatributo debe establecerse enfalse( otras opciones :staticotrue).fuente
Lo hice funcionar dando un alto valor de índice z a la ventana modal DESPUÉS de abrirlo. P.ej:
fuente
La solución proporcionada por @Muhd es la mejor manera de hacerlo. Pero si está atrapado en una situación en la que cambiar la estructura de la página no es una opción, use este truco:
El truco aquí es
data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);"eliminar el fondo predeterminado y crear uno ficticio estableciendo el color de fondo del cuadro de diálogo con un poco de alfa.Actualización 1: como señaló @Gustyn que al hacer clic en el fondo no se cierra el diálogo como se esperaba. Entonces, para lograr eso, debe agregar un código de script java. Aquí hay un ejemplo de cómo puedes lograr esto.
fuente
A pero tarde en esto, pero aquí hay una solución genérica:
Visite este enlace - Bootstrap 3 - modal que desaparece debajo del fondo cuando se usa una barra lateral fija para más detalles.
fuente
Otra forma de abordar esto es eliminar el índice z del
.modal-backdroparchivo bootstrap.css. Esto hará que el telón de fondo esté al mismo nivel que el resto de su cuerpo (aún se desvanecerá) y su modal estará en la parte superior..modal-backdropSe ve como estofuente
Simplemente agregue dos líneas de CSS:
El .modal-backdrop debería tener un valor de 1050 para establecerlo sobre la barra de navegación.
fuente
position: fixedesto no funcionará.Esto cubriría todos los modales sin estropear ninguna de las animaciones o el comportamiento esperado.
fuente
Simplemente he configurado:
y funciona....
Para la pregunta original:
fuente
Use esto en su modal:
fuente
Este problema a menudo se puede experimentar al usar elementos como gradientes en CSS para elementos como fondos o incluso encabezados de acordeón.
Desafortunadamente, modificar o anular el núcleo de Bootstrap CSS no es deseable y puede provocar efectos secundarios no deseados. El enfoque menos intrusivo es agregar,
data-backdrop="false"pero puede notar que el efecto de desvanecimiento ya no funciona como se esperaba.Después de los lanzamientos recientes de Bootstrap, la versión 3.3.5 parece resolver este problema sin efectos secundarios no deseados.
Descargar: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip
Asegúrese de incluir los archivos CSS y los archivos JavaScript de 3.3.5.
fuente
Hola, tuve el mismo problema y luego me di cuenta de que cuando usaba bootsrap 3.1 A diferencia de las versiones anteriores de bootsrap (2.3.2), ¡la estructura html del modal cambió!
debe ajustar el cuerpo y el pie de página del encabezado modal con el cuadro de diálogo modal y el contenido modal
fuente
ninguna de las soluciones sugeridas anteriormente funcionó para mí, pero esta técnica resolvió el problema:
fuente
Tuve este problema y la forma más fácil de solucionarlo fue agregar un índice z mayor que 1040 en el div de diálogo modal:
Creo que bootstrap crea un desvanecimiento de fondo modal div en el que en mi caso tiene el índice z 1040, por lo que si coloca el cuadro de diálogo modal encima de esto, ya no debería estar gris.
fuente
Tengo una solución más ligera y mejor.
Se podría resolver fácilmente a través de algunos estilos CSS adicionales.
ocultar la clase
.modal-backdrop(generada automáticamente desde Bootstrap.js)establecer el fondo de
.modaluna imagen de fondo negro translúcido.Esto funcionará mejor si tiene un requisito que necesita que el modal esté dentro de un elemento y no cerca de la
</body>etiqueta.fuente
establecer el índice z .modal a un valor más alto
Por ejemplo, .sidebarwrapper tiene un índice z de 1100, por lo tanto, establezca el índice z de .modal en 1101
fuente
En mi caso, resuélvelo, agrega esto en mi hoja de estilo:
con el depurador de google, puede examinar el elemento BACKDROP y modificar los atributos. Buena suerte.
fuente
en su barra de navegación
navbar-fixed-topnecesitaz-index = 1041y también si usabootstarp-combined.min.cssel cambio también.navbar-fixed-top, .navbar-fixed-bottomz-index to 1041fuente
Cambia la posición absoluta a relativa.
fuente
También puede eliminar el índice z de .modal-backdrop. El CSS resultante se vería así.
fuente
Eliminé el fondo modal.
Esta no es una mejor solución, pero funciona para mí.
fuente
lo que encuentro es que:
en bootstrap 3.3.0 no está bien, pero cuando está en bootstrap 3.3.5 está bien. veamos el código. 3.3.0:
3.3.5
fuente
Agregue este a sus páginas. Funciona para mi.
fuente
Me arreglaron esto al agregar el estilo a continuación a la etiqueta DIV
Y agregue CSS personalizado
fuente
fuente
Para mí, la solución más fácil fue poner mi modal en un contenedor con posición absoluta e índice z más alto que .modal-backdrop. Como modal-backdrop (al menos en mi caso) tiene z-index 1050:
fuente
En mi caso, tenía un contenedor con lo siguiente:
Solo eliminé el índice z: 1 y no tengo idea de por qué solucionó el problema. También seguro que eliminé la posición relativa, pero lo necesitaba.
fuente