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.
Ejemplos
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">×</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
$("#miModal").modal("show");
4 ideas sobre “Abrir un modal bootstrap desde jQuery”
Le falta una ” (doble comilla) a la sentencia después del selector
Lo correcto es:
$(“#miModal”).modal(“show”);
Gracias por la aportación.
Efectivamente me había comido una comilla.
Un saludo
no me ha funcionado, aún cuando copié el ejemplo y ejecutarlo. Lo que hice después de copiar, es ejecutar el formulario sin el button (según comentario: «Si el modal lo vamos a ejecutar sólamente desde jQuery podemos omitir el botón ya que no es necesario para el funcionamiento»)
Es raro. Si ejecutas el código jquery debería abrirse el modal.
Un saludo