Twitter bootstrap modal se abre delante del formulario

Tengo un problema con mi modal de arranque de Twitter: se abre delante de mi formulario. No tengo idea de lo que hice, porque funcionó muy bien hace 3 días. Puedo escribir en el formulario; Creo que la forma está funcionando. El problema es la apertura modal delante del formulario.Twitter bootstrap modal se abre delante del formulario

Fuente

2012-03-28 Nielsen Rechia

Pega un código para que podamos echarle un vistazo. –

Parece un problema de índice z, pero sin código y sin ejemplos es imposible decir –

¡Mi error, ya lo solucioné! gracias –

La clase .modal-backdrop ha índice z establecido en 1040 y la navbar-fixed-top tiene índice z se establece en 1030. Por lo tanto, el telón de fondo muestra más de la forma.

Reemplace el valor .modal-backdrop z-index en su archivo CSS configurándolo en un valor que sea menor que el índice z de navbar. Esto resolverá el problema.

Fuente

2012-04-17 03:50:07

Impresionante - me ha ahorrado mucho tiempo. – eandersson

¡3 meses detrás de este problema, y ahora lo resolví por mí! ¡¡¡¡Gracias!!!! – Lvkz

Tuve problemas similares. Los he abordado aquí: http://jsfiddle.net/ATeaH/8/

Fuente

2012-04-24 19:12:31 CloudMagick

para resumir esta solución, agregue: $ ('. Modal) .appendTo (' body '); a tu script Esto moverá el .modal (donde sea que se haya definido) hasta donde .modal-backdrop es autogenerado por bootstrap, por lo tanto los 2 elementos 'hermanos', que pueden corregir problemas de z-index – rmirabelle

Una solución simple que Nielsen ha indicado anteriormente que trabajó para mí ...

tuve la div Adjunto mi modal hacia el interior la barra de navegación. Moví el div fuera de la barra de navegación - justo debajo de <body>

¡Problema resuelto!

Fuente

2012-12-11 09:36:05 jasop

Tuve un problema similar cuando un modal se estaba insertando en el DOM a través de AJAX. Sin una actualización de página, el modal permanecía detrás de una máscara y era inaccesible.

Curiosamente, el modal funcionó bien con una actualización de página. Aunque estaba insertando el modal en el mismo lugar con AJAX que con HTML, no funcionaría con AJAX. Mi solución fue agregar el modal parcial al cuerpo. Así que mi código es el siguiente:

$('body').append(....j render partial....);

He intentado algunas de las otras sugerencias que me encontré (como pellizcando la z-index), pero eso no ayudó en mi caso.

Fuente

2013-09-11 00:50:05 bigtex777

Tuve este mismo problema. En mi caso fue debido a un div no cerrado en mi encabezado.

Fuente

2014-02-20 12:33:03

Pruebe esta solución, que trabajó para mí:

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

Fuente

2014-04-18 10:39:57

estoy trabajando con AngularJS y corrió en la misma edición. Para aclarar, mi modal estaba en otro archivo HTML que Angular inyecta en el DOM durante el tiempo de ejecución a través del ng-view. Lo que me causó este problema fue que tenía una clase de animación CSS en el div donde estaba mi ng-view. A modo de ejemplo:

<div ng-app="myApp"> 
    <div class="pageTransition" ng-view></div> <!-- problem: class="pageTransition"--> 
</div>

Extracción de la clase CSS fija el problema y restaurado mi modal hacia el orden normal de trabajo. Una solución al respecto sería reemplazar la clase estándar con Angular's ng-class. De esta forma, puede agregar, modificar o eliminar dinámicamente una clase mientras usa el modal.

Fuente

2014-09-18 17:10:39 ejborges

Añadir lo siguiente a su CSS

.modal-dialog { 
    z-index: 1050; 
}

Fuente

2015-02-10 10:23:52

Si está utilizando SASS puede hacer lo siguiente dentro _modals.scss:

.modal-dialog { 
    position: relative; 
    z-index: $zindex-modal-background; // copy-pasted z-index from .modal-backdrop 
    width: auto; 
    margin: 10px; 
}

Fuente

2016-07-18 03:43:31 adamj

Twitter bootstrap modal se abre delante del formulario

Respuesta

Cuestiones relacionadas