Si usas Bootstrap en tus desarrollos, a veces tendrás la necesidad de abrir o cerrar una ventana modal desde una función de JavaScript y no haciendo clic en un elemento del DOM de la página, cómo por ejemplo desde el botón de cerrar [X] que hay en cada ventana modal.
Si tienes un modal definido así:
<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
para abrirlo sería:
$('#exampleModal').modal({
show:true
});
y para cerrarlo sería:
$('#exampleModal').modal('hide')
Y si quereis abrir un modal desde otro modal, y que el nuevo modal quede por encima, hay que usar style=»z-index: numero;» en la declaración del modal.
Imaginar que tenemos dos modales:
<div class="modal fade"
id="md_Abajo"
role="dialog"
aria-labelledby="md_AbajoEtiq"
aria-hidden="true">
<div class="modal fade"
id="md_Arriba"
role="dialog"
aria-labelledby="md_ArribaEtiq"
aria-hidden="true">
Pues para que los modales se apilen como se espera, debe ordenarlos en su marca de HTML de menor a mayor. Se pone en la declaración del modal lo siquiente: style=´z-index: numero;´ donde numero indica el orden de menor a mayor. Los numeros con z-index menores son los que quedan por debajo.
En nuestro ejemplo:
Modal que queda por abajo
<div class="modal fade"
id="md_Abajo"
role="dialog"
aria-labelledby="md_AbajoEtiq"
aria-hidden="true"
style="z-index: 1600">
Modal que queda por encima:
<div class="modal fade"
id="md_Arriba"
role="dialog"
aria-labelledby="md_ArribaEtiq"
aria-hidden="true"
style="z-index: 1900">
Sé que puede parecer una tontería si ya sabeis cómo funciona, pero para los que nos iniciamos, nos viene bien siempre un poco de ayuda.