Abrir y cerrar ventanas modales en Bootstrap con javaScript

Abrir y cerrar ventanas modales en Bootstrap con javaScript

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.