Abrir un modal bootstrap desde jQuery

En este tutorial aprenderemos cómo activar un modal de bootstrap desde un script con jQuery sin tener que crear un enlace o un botón.

Veamos primero el código de un modal básico de bootstrap que se abre mediante un botón.

<!-- Enlace para abrir el modal -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#miModal">Abrir Modal</button>
<!-- Modal -->
<div id="miModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Contenido del modal -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>Texto del modal</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

Si lo que queremos es activar el modal sin utilizar el enlace podemos hacerlo con jQuery accediendo al propio modal por su id y ejecutando la función modal() de esta forma

<script>
  $("#miModal).modal("show");
</script>

Si el modal lo vamos a ejecutar sólamente desde jQuery podemos omitir el botón ya que no es necesario para el funcionamiento.

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo