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