Bootstrap modal que aparece debajo del fondo

576

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:

modal escondido detrás del telón de fondo

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
En caso de que alguien más busque etiquetas abiertas, etc., tratando de averiguar por qué sucede esto, para mí fue la extensión Feedly Chrome la que rompió mis modales. La desactivación de la extensión devolvió el comportamiento a la normalidad.
— tres
En mayo, el problema fue en iOS y fue causado por overflow-x: hiddenaplicado al contenedor del modal.
— idmean
1
Creó 3 ejemplos en 3 versiones. 3.3.1 funciona bien y los demás no. Versión 3.3.1 jsfiddle Versión 3.3.5 jsfiddle Versión 3.3.6 jsfoddle
— Dimitry
1
Creó un informe de error con el equipo de Bootstrap parece que esto no es realmente un error, incluso si funciona bien en 3.3.1 Puede leer más al respecto en el enlace que publiqué.
— Dimitry
Una publicación de blog relevante para cualquier persona que se enfrente a este problema weblog.west-wind.com/posts/2016/Sep/14/…

Respuestas:

629

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:

  1. La forma más fácil es mover el div modal para que quede fuera de cualquier elemento con posicionamiento especial. Un buen lugar podría ser justo antes de la etiqueta de cierre del cuerpo </body>.
  2. Alternativamente, puede eliminar las 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.
— Muhd
fuente
24
Buena atrapada. Para su información, no solo "arreglado", la posición "relativa" de los padres también causa este problema
— Giang Nguyen
3
@ Muhd, ¿cómo se asegura de que todos sus elementos principales se coloquen de la manera predeterminada?
— indago
44
Prefiera usar la opción uno: "simplemente mueva el div modal para que quede fuera de cualquier elemento con posicionamiento especial". Thx
— mpgn
99
No entiendo esta respuesta. Los ejemplos de Bootstrap muestran un div modal con varias clases a lo largo de la línea de "modal", "modal-fade", etc. Dentro de .modal establece la posición: fijo, y dentro del "cuerpo modal" establece la posición: relativa. Entonces, ¿cómo va a cambiar algo el contenedor modal cuando .modal establece la posición: fijo?
— Carlos
44
Todavía tengo este problema. Lo agregué justo antes </body>y bodyno tiene ningún positionestilo de atributo. Alguna otra idea?
— Tuan Anh Tran
383

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:

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

O, si inicia modal usando botones, suelte .modal('show');y simplemente haga:

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

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

— Adam Albright
fuente
12
Use ese controlador de eventos genérico para hacer que la solución @leandrotk funcione para todos los modales que puede tener en una página $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
— Patrick M.
2
@PatrickM. ¡Asombroso! ¡Eso funcionó de maravilla en un viejo proyecto que estoy asumiendo y tenían modales por todas partes!
— denislexic
55
Esto funciona muy bien cuando realmente no puedes arreglar el posicionamiento CSS. Gracias :)
— alexcasalboni
¿Hay alguna razón por la que pierdo todo el formato CSS cuando hago esto? ¿Y una solución fácil? :-)
— Eugene van der Merwe
1
De la respuesta leandrotk, simplemente cambie #myModal a .modal para que se vea así: $ ('. Modal'). AppendTo ("body"). Esto funcionará con todos los modales ya que tienen un modo de clase predeterminado.
— Ngatia Frankline
170

Probé todas las opciones proporcionadas anteriormente, pero no pude trabajar con ellas.

Qué funcionó: establecer el índice z del .modal-backdrop en -1.

.modal-backdrop {
  z-index: -1;
}
— Jan van der Burgt
fuente
10
Esto funcionó perfectamente y es, con mucho, la solución más fácil. Solíaz-index: 0;
— andrewcockerham
¡También puedo confirmar que solo estas opciones funcionan! ¡Gracias!
— Ferry Kranenburg
¡Gracias! ¿Es esto un error en BS3?
— mauriblint
1
Esto no funciona si está utilizando un tema que tiene muchos índices z variables. Por ejemplo, establecer el fondo como -1haría que aparezca detrás de otros elementos de la página, como los paneles. Pero configurarlo para 3que esté por encima de todo, excepto la ventana emergente modal.
— Justin Skiles
1
También encontré que este es el método más rápido después de agotar las sugerencias en las respuestas clasificadas más arriba. En mi caso, configurar el div con la clase modal-dialog en un índice z de 1060 lo apareció frente a la superposición. Si usa la barra de navegación, querrá mover el modal por encima de la superposición y no al revés, de lo contrario, su barra de navegación podría aparecer encima de la superposición ... el caos insiste ...
— Mike Devenney
152

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:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Bueno:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
— Sid
fuente
Esto fue para mí también. ¡Gracias!
— PedroTanaka
Acabo de tener el mismo problema, ¡la misma solución de hoja de estilo de versión parece haber ayudado a todos! Gracias
— HGB
Gracias, este fue mi problema exacto
— Malcor
Malcor no tiene problemas, he pasado mucho tiempo mientras descubrí este error. Como vemos que fue en '14, ahora es '16, el error aún existe. En realidad, esto no es un error, pero en bootstrap los autores deberían agregar esto a su documentación o algo así.
— Sid
El mismo trato aquí, cambiamos a generar nuestro SASS y nos olvidamos por completo del archivo js en sí ... Esta debe ser la respuesta principal ... Como nuestro modal siempre se incluye por defecto justo antes de la etiqueta de cierre del cuerpo ...
— Angry 84
116

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.

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Nota : el data-backdropatributo debe establecerse en false( otras opciones : statico true).

— PieterVK
fuente
2
¡Con mucho, la solución más fácil y funciona de maravilla!
— learning_to_swim
¡Brillante! También necesitaba requerir bootstrap; no estoy seguro de por qué todas mis otras funciones de Bootstrap funcionan bien, pero necesitaba hacer que el trabajo modal funcionara.
— Steve Klein
Perfecto !!! luché por un día ... y me salvaste otro día. Gracias de nuevo .. +1 y saludos
— Bhaskara
1
Después de leer cuidadosamente todas las soluciones, encontré que esta era la más sensata a partir de la versión actual de bootstrap y jQuery. Gracias.
— Cifrado
3
¡Gracias! Esta pregunta tiene más de 140k en vistas y no entiendo por qué bootstrap no puede solucionar esto. oh bueno, salud.
— Chad
58

Lo hice funcionar dando un alto valor de índice z a la ventana modal DESPUÉS de abrirlo. P.ej:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
— Andrew Dyster
fuente
¿Funciona (el hombre dice que sí), por qué rechazas votar? Como estoy mirando, parece que lo hará.
— Rolice
Sí, ¿alguien puede explicar por qué esta es una mala respuesta? ¿Es solo que es una especie de hacky?
— brandones
66
No entiendo los votos negativos. Sí, es hacky, pero las otras soluciones no funcionaron para mí, así que pensé en contribuir con esto a las personas a las que no les importa usar soluciones "hacky" para que todo funcione.
— Andrew Dyster
Esta fue una idea relevante para mi problema particular al poner un modal sobre un elemento de pantalla completa. +1
— Jack Stone
3
Es una mala respuesta porque es un truco y no hace ningún intento de indicarlo. Otras respuestas dicen, "si nada más funciona, podrías ...". La realidad es que el modal se usa ampliamente en la web y debería funcionar si se implementa correctamente. Las respuestas hacky no ayudan a las personas a resolver cómo hacer las cosas de la manera correcta.
— Lukos
35

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:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

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. 

$('.modal').click(function(event){
    $(event.target).modal('hide');
});
— Krishnendu
fuente
Esto funciona excepto que al hacer clic en el fondo no se cierra el diálogo como se esperaba.
— Gustyn
Krishnendu eres mi héroe. Llegué a trabajar con pesimismo en mente. 3 días antes de mi presentación final para enfrentar este problema, de repente, fue un nerviosismo por decir lo menos. U mi amigo se merece 100000 votos a favor, solo puedo darte uno :) ten un día maravillosamente bendecido.
— DotNetBeginner
Cuando intento esto, no cubre el fondo completo de la página, solo el elemento div en el que se declara el modal.
— Sam Sam
Funcionó a la perfección. ¡Gracias!
— gfernandes
Funcionó a la perfección. ¡Gracias!
— Mayank Pandeyz
16

A pero tarde en esto, pero aquí hay una solución genérica:

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

Visite este enlace - Bootstrap 3 - modal que desaparece debajo del fondo cuando se usa una barra lateral fija para más detalles.

— Rohan
fuente
Esta fue una solución perfecta para un complemento de Wordpress que estaba creando donde no podía controlar los elementos principales en los temas de otras personas.
— Mark Rummel
¡La mejor solución hasta ahora!
— digz6666
10

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-backdrop Se ve como esto

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
— Samuel Bergeron
fuente
10

Simplemente agregue dos líneas de CSS:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

El .modal-backdrop debería tener un valor de 1050 para establecerlo sobre la barra de navegación.

— Wahyu Primadi
fuente
Bien, pero si el contenedor de los modales tiene position: fixedesto no funcionará.
— CPHPython
10

Esto cubriría todos los modales sin estropear ninguna de las animaciones o el comportamiento esperado. 

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
— Cam Tullos
fuente
1
solución global Sin embargo, es mejor encontrar el problema.
— Milad Abooali
No creo que sea una gran solución, ¿qué pasa con las páginas con muchos modales? Podría ponerse desordenado.
— Glen
¿Puedes explicar cómo se pondría desordenado? Todo lo que está haciendo es mover el modal desde donde está actualmente en el DOM hasta el final de la etiqueta del cuerpo. No está creando nada que ya no esté allí, solo moviéndolo y dándole automáticamente el índice z superior.
— Cam Tullos
La mejor solución, creo. no es necesario editar ningún CSS y cambiar la apariencia modal
— Moslem7026
8

Simplemente he configurado:

#myModal {
    z-index: 1500;
}

y funciona....

Para la pregunta original: 

.my-module {
    z-index: 1500;
}
— AmintaCode
fuente
Mi problema también fue el índice z.
— James Lock
8

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.

— Richard Nalezynski
fuente
6

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 

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>
— talsibony
fuente
+1 asegúrese de estar utilizando versiones compatibles de bootstrap.css y bootstrap.js y que su marcado coincida con la versión que está utilizando.
— Srayner
Sí, esta fue mi conclusión y lo escribí aquí solo si alguien tenía este problema.
— talsibony
Jesucristo, esta respuesta está enterrada profundamente. El mismo caso para Bootstrap 4.
— Randell
6

ninguna de las soluciones sugeridas anteriormente funcionó para mí, pero esta técnica resolvió el problema:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
— Javed Iqbal
fuente
Prefiero esta forma porque perdí el formato CSS con los otros métodos.
— Eugene van der Merwe
6

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:

<div class="modal-dialog" style="z-index: 1100;">

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.

— Chris Rosete
fuente
6

Tengo una solución más ligera y mejor.

Se podría resolver fácilmente a través de algunos estilos CSS adicionales.

  1. ocultar la clase .modal-backdrop(generada automáticamente desde Bootstrap.js)

    .modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

  2. establecer el fondo de .modaluna imagen de fondo negro translúcido.

    .modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}

Esto funcionará mejor si tiene un requisito que necesita que el modal esté dentro de un elemento y no cerca de la </body>etiqueta.

— JM Tee
fuente
Me salvaste el día ... ¡Esta es una buena alternativa!
— notme
@xunga, no te preocupes. por favor comparta esta solución con otras personas :)
— JM Tee
puedes ver las ediciones aquí ... stackoverflow.com/posts/42887253/revisions
— notme
Gracias JM, tu solución fue la única que funcionó para mí.
— Ahmed J.
5

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

.modal {
    z-index: 1101;
}
— Un Mohudum Kamil
fuente
5

En mi caso, resuélvelo, agrega esto en mi hoja de estilo:

.modal-backdrop{
  z-index:0;
}
Expandir fragmento

con el depurador de google, puede examinar el elemento BACKDROP y modificar los atributos. Buena suerte.

— Ckevyn Ovalle
fuente
3

en su barra de navegación navbar-fixed-topnecesita z-index = 1041 y también si usa bootstarp-combined.min.cssel cambio también .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

— Mohsin
fuente
3

También puede eliminar el índice z de .modal-backdrop. El CSS resultante se vería así.

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }
— Matthew Gallegos
fuente
3

Eliminé el fondo modal.

.modal-backdrop {
    display:none;
}

Esta no es una mejor solución, pero funciona para mí.

— Código brevemente
fuente
3

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:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)
— ttong
fuente
3

Agregue este a sus páginas. Funciona para mi.

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
— Tomar i
fuente
3

Me arreglaron esto al agregar el estilo a continuación a la etiqueta DIV

style="background-color: rgba(0, 0, 0, 0.5);"

Y agregue CSS personalizado

.modal-backdrop {position: relative;}
— RaymondLe
fuente
3

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:

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>
Expandir fragmento

— sivi911
fuente
z-index funcionó para mí. Muchas gracias.
— Asif Iqbal
2

En mi caso, tenía un contenedor con lo siguiente:

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

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.

— hsobhy
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.