Bootstrap Modal sentado detrás del telón de fondo

Así que tengo casi el mismo problema que @Jamescoo , pero creo que mi problema proviene del hecho de que ya he colocado un par de DIV para crear un panel de navegación deslizante.

Aquí está mi configuración exacta replicada: http://jsfiddle.net/ZBQ8U/2/

BONO: Siéntase libre de tomar el código para el panel deslizante si lo desea 🙂

Los índices z no deberían entrar en conflicto y sus valores mostrarían que están astackndo correctamente, pero visualmente no lo están.

Una vez que haces clic en el botón ‘Abrir Modal’,

cubre todo! (Tendrás que volver a ejecutar el código para restablecerlo)

No sé muy bien cómo remediar este … ¿Alguna idea?

Simplemente mueva todo el modal fuera del rest de su código, hasta el final. No necesita estar nested en ningún otro elemento, que no sea el cuerpo.

   
...

Manifestación

Sugieren esta solución en la documentación.

Colocación de marcas modales
Siempre trate de colocar un código HTML modal en una posición de nivel superior en su documento para evitar que otros componentes afecten la apariencia y / o funcionalidad del modal.

Aunque el índice z de .modal es más alto que el del .modal-backdrop , ese .modal está en un parent div #content-wrap que tiene un z-index .modal-backdrop que .modal-backdrop (z-index: 1002 vs z-index: 1030).

Debido a que el padre tiene un índice z más bajo que el .modal-backdrop todo en él estará detrás del modal, independientemente de cualquier índice Z dado a los niños.

Si elimina el z-index que ha establecido en body div#fullContainer #content-wrap y también en el #ctrlNavPanel , todo parece funcionar bien.

 body div#fullContainer #content-wrap { background: #ffffff; bottom: 0; box-shadow: -5px 0px 8px #000000; position: absolute; top: 0; width: 100%; } #ctrlNavPanel { background: #333333; bottom: 0; box-sizing: content-box; height: 100%; overflow-y: auto; position: absolute; top: 0; width: 250px; } 

NOTA: Creo que inicialmente usaste z-indexes en # content-wrap y #ctrlNavPanel para asegurarte de que el navegador se encuentre atrás, pero eso no es necesario porque el elemento nav viene antes del contenido, envuelve el HTML, por lo que solo necesita colocarlos, no establecer explícitamente un orden de astackmiento.


EDITAR A medida que Schmalzy comenzó a leer, ya no se puede hacer clic en los enlaces. Esto se debe a que el contenedor completo tiene un ancho del 100% y cubre la navegación. La manera más rápida de arreglar esto es colocar la navegación dentro de ese div:

  

DEMO AQUÍ

En mi caso, podría solucionarlo agregando css para .modal-backdrop

 .modal-backdrop { z-index: -1; } 

Aunque esto funciona, los controles de formulario aún parecen aparecer sobre el fondo, al hacer clic en cualquier lugar se descarta el modal, pero no se ve muy bien.

Una solución mejor para mí es enlazar al evento mostrado (una vez que se carga la página) y corregir la propiedad z-index.

 $('.modal').on('shown.bs.modal', function() { $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1); }); 

En este caso, si está de acuerdo con cambiar el DOM en modo modal que se muestra:

 $('.modal').on('shown.bs.modal', function() { //Make sure the modal and backdrop are siblings (changes the DOM) $(this).before($('.modal-backdrop')); //Make sure the z-index is higher than the backdrop $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1); }); 

Ninguna de las respuestas funcionó lo suficientemente bien para mí. El problema parece residir donde las ventanas modales deben estar fuera del cuerpo. Y no es lo mejor

Entonces este código hizo el trabajo de la mejor manera:

 $('.modal ').insertAfter($('body')); 

En mi caso, uno de los padres de mi modal estaba animado y tenía este

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; z-index: 100; }

El bloqueador aquí es animation-fill-mode: both; . No podía simplemente mover modal fuera, así que la solución era anular ‘animation-fill-mode’ a animation-fill-mode: none; . La animación aún funcionaba bien.

Estuve peleando con el mismo problema algunos días … Encontré tres soluciones posibles, pero no sé, cuál es la más óptima, si alguien me dice, lo agradeceré.

las modificaciones estarán en bootstrap.css

Opción 1:

 .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; <- DELETE THIS LINE background-color: #000000; } 

Opcion 2:

 .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; <- MODIFY THIS VALUE BY -1 background-color: #000000; } 

Opción 3:

 /*ADD THIS*/ .modal-backdrop.fade.in { z-index: -1; } 

Usé la opción 2.

Otra resolución para este problema es agregar z-index: 0; a la clase .modal-backdrop en su archivo bootstrap-dialog.css si no desea modificar bootstrap.css.

Intente eliminar el fondo, si realmente no lo necesita (data-backdrop = “false”):

  

si no podemos eliminar el fondo y / o tenemos un marco de componentes como angular o vue, no podemos mover modal a la raíz. Hice este truco: poner mi contenedor modal-telón de fondo personalizado (con clase adicional) como hermano para contenedor de diálogo modal y agregué algunos css

  

y css

 .modal-backdrop{z-index: -1}// or you can disable modal-backdrop .modal-holder.modal-backdrop{z-index: 100} .modal-holder + .modal-dialog {z-index: 1000} 

Puedes usar esto:

  Adding style="" and data-backdrop false would fix it. 

simplemente elimine z-index: 1040 ;

de este archivo bootstrap.css class .modal-backdrop

Me faltaba el siguiente html

lo agregó y trabajó sin problemas

Como no tengo la posibilidad de mover el marcado modal porque lo agregué en una plantilla parcial dentro de un condicional, lo que funcionó para mí es agregar el siguiente código de CSS

 .modal.fade { display: none; } 

Luego, cuando boostrap agregue la clase “in” a través de js, aplique display: block y todo funciona bien.

Encontré que aplicando el ionic framework (ionic.min.cs) después de bootstrap cursando este problema para mí.

Si no puede poner el modal en la raíz (si su uso es angular y el modal está en un controlador, por ejemplo), la modificación de bootstrap o el uso de js obviamente es una mala solución.

lo que significa que tiene la estructura de su sitio web:

 //not working 

abra su inspector de código y mueva el modal a la raíz, debería estar funcionando (pero no en el lugar que desee):

 //should be working 

ahora colócalo en el primer div y comprueba si funciona: si es así, comprueba el próximo hijo hasta que no funcione y encuentra el div que es el problema;

 //should be working 

Una vez que sepa qué div es el problema, puede jugar con la pantalla CSS y la posición para que funcione.

todos tienen una estructura diferente pero en mi caso estableciendo un padre para display: table; fue la solución

Pon este código donde quieras

 $('.modal').on('shown.bs.modal', function () { var max_index = null; $('.modal.fade.in').not($(this)).each(function (index , value){ if(max_index< parseInt( $(this).css("z-index"))) max_index = parseInt( $(this).css("z-index")); }); if (max_index != null) $(this).css("z-index", max_index + 1); }); 

Muchas veces, no puede mover el modal hacia afuera ya que esto afecta su estructura de diseño.

La razón por la que el fondo viene por encima de su modal es id. El padre tiene cualquier posición establecida.

Una forma muy simple de resolver el problema aparte de mover su modal al exterior es mover el fondo dentro de la estructura donde tiene su modal. En tu caso, podría ser

 $(".modal-backdrop").appendTo("main"); 

Tenga en cuenta que esta solución es aplicable si tiene una estructura definida para su aplicación y no puede mover el modal al exterior ya que irá en contra de la estructura de diseño

simplemente mueva su modal fuera de todos los contenidos div, colóquelo en su mayoría antes del cierre del cuerpo.

Para aquellos que usan ASP.NET MVC ,

Necesitando mover el div modal antes de la etiqueta pero no puede hacerlo porque está usando una página de Layout

Defina una sección en su archivo _Layout.cshtml justo antes de la etiqueta del cuerpo, por ejemplo:

 ... some html in layout page ... @RenderSection("bottomHTML", required: false)   

Entonces en tu vista

 @section bottomHTML {  

De esta forma, el HTML modal se procesará antes de que la etiqueta corporal y el modal ahora se muestren correctamente.

Tuve un problema similar al hecho de que el fundido no funcionaba y la superposición permaneció en la página. He añadido contenido dynamic a la página (actualice algunos contenidos solo en la acción modal). También tuve este $ (‘# rejectModal -‘ + itemId) .modal (‘hide’) (itemId es una identificación dinámica para múltiples modos en una sola página para rechazar cierta información) pero el problema no desapareció.

La superposición se mantuvo porque mi diseño no estaba configurado como nulo en la vista parcial. Después de configurar esto, el problema desapareció:

 @{ Layout = null; } 

Primero asegúrese de que el modal no se encuentre en ningún div principal. A continuación, agregue $ (‘# myModal’). AppendTo (“cuerpo”)

Funcionó bien para mí

Además de todas las respuestas aquí, descubrí que el bootstrap4 “fadeIn animado” también está causando este error (no se puede hacer clic modal detrás del fondo):

compruebe si su modal está en la siguiente etiqueta padre (animación de arranque)

Eliminé esta etiqueta, resolví el problema para mí.

Si usa JQuery, puede usar el appendTo () para agregar el modal a un elemento específico, en este caso, en la mayoría de los casos, una línea simple puede mover su modal sobre el fondo, independientemente de dónde esté la posición de su div modal

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

aquí está la referencia de la función JQuery appendTo: http://api.jquery.com/appendto/

Lo actualicé a tu violín http://jsfiddle.net/ZBQ8U/240/

esto funciona para mi

  

 var element = $('#modalDecision'); // also taken from bootstrap 3 docs $(element).on('shown.bs.modal', function (e) { // keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far... var backDrop = $(""); $(element).append($(backDrop)); }); 

Expliqué este problema, y ​​después de investigar mi CSS, el contenedor principal (hijo directo del cuerpo) tenía:

 position: relative z-index: 1 

el fondo funcionó bien después de eliminar esas dos propiedades. También puede encontrar este problema si el wraper principal tiene una position: fixed