Archivo de la etiqueta Bootstrapp

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"> .... </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.