Cambia entre modales apilados - jquery, twitter-bootstrap, bootstrap-modal

Actualmente tengo algunos modales apilados abiertos en mi pantalla. He creado un básico JSFiddle para esto.

Se apilan por:

#myModal{
top: 0% ;
}
#myModal2{
top: 5% ;
}
#myModal3{
top: 10% ;
}
#myModal4{
top: 15% ;
}

Lo que quiero es poder hacer clic entre losmodales abiertos. Por ejemplo. Cuando los cuatro están arriba, quiero poder hacer clic en la parte visible del Modal 1 y para que el Modal 1 llegue al frente. O (si eso no puede suceder), quiero tener un botón que me permita traer el Modal 1 al frente.

Hasta ahora, no puedo encontrar nada en bootstrap que me permita hacer esto.

Respuestas

No he podido probar esto en un violín, pero deberías crear un evento de clic en todos los elementos con clase .modal-dialog y en el controlador de eventos establecer todos los elementos de .modal tener un cierto índice z y luego establecer el modal de lo que se hizo clic usando this para ser un índice z más alto.

Algo como:

$(".modal-dialog").click (function() {
var modalSelected = $(this).parent();
$(".modal").each(function() {
var idx = $(this).length;
$(this).css("z-index", 1040 + (10 * idx));
});
modalSelected.css("z-index",1500);
});

El problema que puede tener es que un modal grande puede ocultar completamente todos los demás diálogos modales. ¿Pensaste en posiblemente usando pestañas en su lugar?