Superposición de múltiples modales
Necesito que la superposición se muestre encima del primer modal, no detrás.
Mostrar fragmento de código
Intenté cambiar el z-indexde .modal-backdrop, pero se vuelve un desastre.
En algunos casos tengo más de dos modales en la misma página.
Solución inspirada en las respuestas de @YermoLamers y @Ketwaroo.
Corrección del índice z de fondo
Esta solución utiliza un setTimeoutporque .modal-backdropno se crea cuando show.bs.modalse activa el evento.
$(document).on('show.bs.modal', '.modal', function() {
const zIndex = 1040 + 10 * $('.modal:visible').length;
$(this).css('z-index', zIndex);
setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});
- Esto funciona para todos
.modallos creados en la página (incluso los modales dinámicos) - El fondo se superpone instantáneamente al modal anterior.
Ejemplo jsfiddle
índice z
Si no le gusta el índice z codificado por algún motivo, puede calcular el índice z más alto en la página de esta manera:
const zIndex = 10 +
Math.max(...Array.from(document.querySelectorAll('*')).map((el) => +el.style.zIndex));
Corrección de la barra de desplazamiento
Si tiene un modal en su página que excede la altura del navegador, no podrá desplazarse en él al cerrar un segundo modal. Para solucionar este problema agregue:
$(document).on('hidden.bs.modal', '.modal',
() => $('.modal:visible').length && $(document.body).addClass('modal-open'));
Versiones
Esta solución está probada con bootstrap 3.1.0 - 3.3.5
Me doy cuenta de que se ha aceptado una respuesta, pero recomiendo encarecidamente no piratear el arranque para solucionar este problema.
Puedes lograr el mismo efecto con bastante facilidad conectando los controladores de eventos mostrados.bs.modal y oculto.bs.modal y ajustando el índice z allí.
Aquí hay un ejemplo práctico
Un poco más de información está disponible aquí.
Esta solución funciona automáticamente con modales de pilas arbitrariamente profundas.
El código fuente del script:
$(document).ready(function() {
$('.modal').on('hidden.bs.modal', function(event) {
$(this).removeClass( 'fv-modal-stack' );
$('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
});
$('.modal').on('shown.bs.modal', function (event) {
// keep track of the number of open modals
if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
$('body').data( 'fv_open_modals', 0 );
}
// if the z-index of this modal has been set, ignore.
if ($(this).hasClass('fv-modal-stack')) {
return;
}
$(this).addClass('fv-modal-stack');
$('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
$(this).css('z-index', 1040 + (10 * $('body').data('fv_open_modals' )));
$('.modal-backdrop').not('.fv-modal-stack').css('z-index', 1039 + (10 * $('body').data('fv_open_modals')));
$('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack');
});
});
