Superposición de múltiples modales

Me doy cuenta de que se ha aceptado una respuesta, pero sugiero encarecidamente no hackear bootstrap para solucionar esto.

Puede lograr fácilmente el mismo efecto conectando los controladores de eventos.bs.modal mostrados y.bs.modal ocultos y ajustando el índice z allí.

Aquí hay un ejemplo de trabajo

Un poco más de información está disponible aquí.

Esta solución funciona automáticamente con modales arbitrariamente profundamente apilados.

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'); 

    });        
});

Versión algo más corta basada en la sugerencia de Yermo Lamers, esto parece funcionar bien. Incluso con animaciones básicas como fade in / out e incluso crazy batman newspaper rotar. http://jsfiddle.net/ketwaroo/mXy3E /

$('.modal').on('show.bs.modal', function(event) {
    var idx = $('.modal:visible').length;
    $(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
    var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
    $('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
    $('.modal-backdrop').not('.stacked').addClass('stacked');
});

Combinando la respuesta de A1rPun con la sugerencia de StriplingWarrior, se me ocurrió esto:

$(document).on({
    'show.bs.modal': function () {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    },
    'hidden.bs.modal': function() {
        if ($('.modal:visible').length > 0) {
            // restore the modal-open class to the body element, so that scrolling works
            // properly after de-stacking a modal.
            setTimeout(function() {
                $(document.body).addClass('modal-open');
            }, 0);
        }
    }
}, '.modal');

Funciona incluso para los modales dinámicos agregados después del hecho, y elimina el problema de la segunda barra de desplazamiento. Lo más notable para lo que encontré esto útil fue integrar formularios dentro de los modales con la retroalimentación de validación de las alertas de Bootbox, ya que usan modales dinámicos y, por lo tanto, requieren que vincules el evento al documento en lugar de a .modal, ya que sólo se une a los existentes modal.

Fiddle aquí.

He creado un plugin Bootstrap que incorpora muchas de las ideas publicadas aquí.

Demo en Bootply: http://www.bootply.com/cObcYInvpq

También aborda el problema con los modales sucesivos que hacen que el telón de fondo se vuelva más y más oscuro. Esto asegura que solo un telón de fondo sea visible en un momento dado:

if(modalIndex > 0)
    $('.modal-backdrop').not(':first').addClass('hidden');

El índice z del fondo visible se actualiza tanto en el show.bs.modal y hidden.bs.modal eventos:

$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));

Al resolver Apilar modales se desplaza por la página principal cuando se cierra encontré que las versiones más recientes de Bootstrap (al menos desde la versión 3.0.3) no requieren ningún código adicional para apilar modales.

Puede agregar más de un modal (por supuesto que tiene un ID diferente) a su página. El único problema que se encuentra al abrir más de un modal será que el cierre elimina la clase modal-open para el selector de cuerpo.

Puede usar el siguiente código Javascript para volver a agregar el modal-open :

$('.modal').on('hidden.bs.modal', function (e) {
    if($('.modal').hasClass('in')) {
    $('body').addClass('modal-open');
    }    
});

En el caso de que no necesite el efecto de fondo para el modal apilado puede configurar data-backdrop="false".

Versión 3.1.1. se corrigió Se corrigió el telón de fondo modal que superponía la barra de desplazamiento del modal, pero la solución anterior también parece funcionar con versiones anteriores.

Finalmente resuelto. Lo probé de muchas maneras y funciona bien.

Aquí está la solución para cualquiera que tenga el mismo problema: Cambie el modal .prototipo.mostrar función (en bootstrap.js o modal.js)

DE:

if (transition) {
   that.$element[0].offsetWidth // force reflow
}   

that.$element
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

PARA:

if (transition) {
    that.$element[0].offsetWidth // force reflow
}

that.$backdrop
   .css("z-index", (1030 + (10 * $(".modal.fade.in").length)))

that.$element
   .css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

Es la mejor manera que he encontrado: comprobar cuántos modales se abren y cambiar el índice z del modal y el telón de fondo a un valor más alto.