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"> .... </div>para abrirlo sería:
$('#exampleModal').modal({ show:true });y para cerrarlo sería:
$('#exampleModal').modal('hide')Si al cerrar el modal quereis ejecutar código javascript sería así:
$("#exampleModal").on("hidden.bs.modal", function () {
// Aquí va el código a ejecutar cuando se dispara el evento de cerrar la ventana modal
});Y si queréis 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>
<div class="modal fade"
id="md_Arriba"
role="dialog"
aria-labelledby="md_ArribaEtiq"
aria-hidden="true">
....
</div>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: XXX;´ donde XXX 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.