javascript - horizontally - Modal Bootstrap que aparece debajo del fondo
modal jquery (30)
He usado el código para mi modal directamente del ejemplo de Bootstrap, y he incluido solo bootstrap.js (y no bootstrap-modal.js) Sin embargo, mi modal aparece debajo del fondo gris (fondo) y no es editable.
Esto es lo que parece:
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?
Además, asegúrese de que la versión de BootStrap css y js sean las mismas. Diferentes versiones también pueden hacer que aparezca modal bajo fondo:
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>
Cambia la posición absoluta a relativa.
.modal-backdrop {
position: relative;
/* ... */
}
El problema tiene que ver con el posicionamiento de los contenedores padres. Puede "mover" fácilmente su modal fuera de estos contenedores antes de mostrarlo. Aquí le indicamos cómo hacerlo si estaba show su modal usando js:
$(''#myModal'').appendTo("body").modal(''show'');
O, si .modal(''show''); el .modal(''show''); modal usando botones, suelte el .modal(''show''); y sólo haz
$(''#myModal'').appendTo("body")
Esto mantendrá toda la funcionalidad normal, permitiéndole mostrar el modal usando un botón.
En mi caso resuélvelo, agrega esto en mi hoja de estilo:
.modal-backdrop{
z-index:0;
}
con el depurador de google, puede examinar el elemento BACKDROP y modificar atributos. Buena suerte.
En mi caso, la causa fue boostrap.min.css :) una vez que lo excluí de mi archivo html como referencia, el cuadro de diálogo se muestra en la parte de la sombra modal :)
En mi caso, tuve una envoltura 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é se solucionó el problema. También seguro que quitando la posición relativa lo hice pero lo necesitaba.
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 es posible que note que el efecto de atenuación ya no funciona como se esperaba.
Después de seguir las recientes versiones 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 JavaScript desde 3.3.5.
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'');
});
Hola, tuve el mismo problema, entonces me doy cuenta de que cuando usas bootsrap 3.1 A diferencia de las versiones anteriores de bootsrap (2.3.2), ¡se cambió la estructura html del modal!
debe envolver el encabezado modal y el pie de página con el 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>
La solución provista 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">×</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);" eliminando el telón de fondo predeterminado y cree uno ficticio configurando el color de fondo del diálogo mismo con algo de alfa.
Actualización 1: Como lo señaló @Gustyn, hacer clic en el fondo no cierra el cuadro de diálogo como se esperaba. Así que para lograrlo tienes que agregar algún código de script java. Aquí hay algunos ejemplos de cómo puedes lograr esto.
$(''.modal'').click(function(event){
$(event.target).modal(''hide'');
});
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");
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)
Me arreglé esto agregando estilo abajo a la etiqueta DIV
style="background-color: rgba(0, 0, 0, 0.5);"
Y agregar css personalizado
.modal-backdrop {position: relative;}
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);
});
Otra forma de abordar esto es eliminar el índice z del .modal-backdrop en bootstrap.css. Esto hará que el telón de fondo esté en el mismo nivel que el resto de tu cuerpo (aún se desvanecerá) y tu modal estará en la parte superior.
.modal-backdrop tiene este aspecto
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}
Probé todas las opciones proporcionadas anteriormente, pero no conseguí que funcionara con esas.
Lo que funcionó: establecer el índice z del .modal-backdrop en -1.
.modal-backdrop {
z-index: -1;
}
Quité el telón de fondo modal.
.modal-backdrop {
display:none;
}
Esta no es la mejor solución, pero funciona para mí.
Si el contenedor modal tiene una posición fija o relativa o está dentro de un elemento con una posición fija o relativa, se producirá este comportamiento.
Asegúrese de que el contenedor modal y todos sus elementos principales estén ubicados de manera predeterminada para solucionar el problema.
Aquí hay un par de maneras de hacer esto:
- La forma más sencilla es simplemente 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 cuerpo de cierre
</body>. - Alternativamente, puede eliminar la
position:propiedades CSS del modal y sus ancestros hasta que el problema desaparezca. Sin embargo, esto podría cambiar el aspecto y las funciones de la página.
Simplemente he establecido:
#myModal {
z-index: 1500;
}
y funciona....
Para la pregunta original:
.my-module {
z-index: 1500;
}
Solo agrega dos líneas de CSS:
.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}
El .modal-backdrop debe tener un valor de 1050 para configurarlo sobre la barra de navegación.
También me he encontrado con este problema y ninguna de las soluciones funcionó hasta que me di cuenta de que en realidad no necesito un telón de fondo. Puede eliminar fácilmente el telón de 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 atributo de data-backdrop debe establecerse en false ( otras opciones : static o true ).
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); }
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(generado automáticamente desde Bootstrap.js).modal-backdrop { display:none; visibility:hidden; position:relative }establece el fondo de
.modala una 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 etiqueta </body> .
Tuve este problema y la forma más fácil de solucionarlo era 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 div desvanecimiento de fondo modal en el que, en mi caso, tiene el índice z 1040, por lo que si coloca el diálogo modal encima de esto, ya no debería estar gris.
Un poco 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 al usar una barra lateral fija para obtener más detalles.
Usa esto en tu modal:
data-backdrop="false"
en su barra de navegación navbar-fixed-top necesita z-index = 1041 y también si usa bootstarp-combined.min.css también cambia .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041
establecer el índice z .modal a un valor más alto
Por ejemplo, .sidebarwrapper tiene un índice z de 1100, así que establezca el índice z de .modal en 1101
.modal {
z-index: 1101;
}
intente sobrescribir el valor de desbordamiento de clase .modal-open de oculto a visible.
.modal-open {
overflow: visible;
}
$(''.modal'').insertAfter($(''body''));