Bootstrap jQuery Modal

Utiliza el complemento Bootstrap jQuery modal para agregar cuadros de diálogo en tu sitio para lightboxes, notificaciones de usuario o contenido completamente personalizado.

Bootstrap dispone de un componente ya preparado para que tan solo tengas que incluir las etiquetas html dentro de tu <body> y adaptarlo a tu necesidad. Eso sí, tu página debe utilizar Bootstrap y jQuery para hacerlo funcionar.

Este tipo de ventanas modales se pueden emplear para mostrar una fotografía, texto, un formulario o lo que se te ocurra.

En el ejemplo en funcionamiento vamos mostrar un botón que abre una ventana donde se muestra un mini formulario donde puedes indicar tu email para enviarlo y procesarlo en el servidor.

En primer lugar, tu página debe tener todo lo necesario para utilizar Bootstrap. En la página oficial de Bootstrap tienes una guía rápida de como agregar Bootstrap a tu sitio. Ver guía de instalación Bootstrap.

Una vez tengas todo lo necesario para usar Bootstrap en tu sitio, tan solo te queda añadir el siguiente código dentro del <body>:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Abrir ventana modal
</button>
 
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="index.php" method="post">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Hola</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h4>Bienvenido a la ventana modal Boostrap 4</h4>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email</label>
                        <input type="email" class="form-control" name="email" placeholder="Escribe tu email...">
                        <small id="emailHelp" class="form-text text-muted">Escribe tu email. Esto es un ejemplo. Tu email no queda registrado en ningun lugar.</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="submit" name="submitSave" class="btn btn-primary">Guardar cambios</button>
                </div>
            </form>
        </div>
    </div>
</div>

Como bien puedes observar, tenemos el botón que abre la ventana modal y justo debajo el contenedor de la ventana con algo de contenido que hemos agregado para tener un formulario y un campo de texto para agregar el email.

Bootstrap jQuery modal

Los botones de acción que tiene esta ventana son el botón de cerrar o guardar cambios. Si pulsa en la “x” o en el botón cerrar la ventana se cierra y si pulsas en el botón “Guardar cambios”, el texto que hayas depositado en el campo email se envía al servidor para ser procesado. En este caso, el único proceso que hacemos es mostrar el email recibido por pantalla.

Como puedes ver a continuación, el código PHP que recibe la información es muy simple:

<?php
if (isset($_POST['submitSave'])) {
    if ($_POST['email'] != '') {
        echo '<div class="alert alert-success" role="alert">
                Email <strong>'.$_POST['email'].'</strong> recibido correctamente!
            </div>';
    } else {
        echo '<div class="alert alert-danger" role="alert">
                No has escrito tu email.
            </div>';
    }
}
?>

Ver más documentación Ver ejemplo en funcionamiento

Esta entrada ha sido actualizada el 12/07/2018.

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (14 votos, promedio: 4,64 de 5)
Cargando…

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

43 respuestas a “Bootstrap jQuery Modal”

  1. Carlos dice:

    A mi me gustaría que se abriera al cargar la página principal, no pulsando un botón. Si me podéis ayudar lo agradecería.

    • Nestor Ramos dice:

      Puedes cargarlo en un js, y llamarlo inmediatamente después que el DOM este listo.

      • Juan Pablo Arias Schiavi dice:

        hola necesito hacer lo mismo que me salga el model al cargar una pagina, como podria hacerlo?

        • JoseMMtzA dice:

          JS funcion ready
          $( document ).ready(function() {
          .
          ./*establecer el ID del modal */
          .
          });

          cuando tu archivo se termine ce cargar llamara el modal

      • lml lml dice:

        de esta manera
        $(document).ready(function(){
        $(“#myModal”).modal(“show”);
        });

    • carlosalvet dice:

      Hazta donde me quede, esa manera de abrir una ventana modal ya no se usa, puesto que genera agujeros en la seguridad de tu sitio, y ya no esta recomendada ademas de que varios generadores de maquinas virtuales ya quitaron esa opción.

    • cesdar dice:

      Puedes llamar al modal en el body con un onload=”#modal” asi cuando cargue el cuerpo de la pagina cargará el modal

  2. Jesus dice:

    Por ejemplo, si quiero que se muestre como un error de login en mi pagina como le haría?
    Te explico: ingreso los datos usuario y contraseña, y en lugar de que me mande a otra pagina o un aviso en la misma pagina, quisiera que se abriera la ventana modal, indicándome que los datos son incorrectos, espero me puedas ayudar.

    • Brandon dice:

      Con JSON si el php no encuentra el usuario lo devuelves y ya en el js por medio de un if muestras si existe showmodalsucces y de lo contrario showmodal error .

  3. Darketus dice:

    Tengo Problemas con el modal por que lo ando implementando con mi botón eliminar pero al borrar el registro no aparece el modal que puedo hacer??
    Necesito de su Ayuda

  4. Juan Pablo Arias Schiavi dice:

    no me funcional el modal, nose que estare haciendo mal soy novato te dejo mi codigo:

    Bootstrap 101 Template


    Abrir ventana modal

    ×
    Cabecera de la ventana

    Texto de la ventana
    Mas texto en la ventana.

    Guardar
    Cerrar

  5. Juan Pablo Arias Schiavi dice:

    no me funcional el modal, nose que estare haciendo mal soy novato te dejo mi codigo:
    <html>
    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap 101 Template</title>
    <meta name=\"description\" content=\"Creating Modal Window with Twitter Bootstrap\">
    <!– Bootstrap –>
    <link href=\"css/bootstrap.css\" rel=\"stylesheet\">
    <!– HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries –>
    <!–[if lt IE 9]>
    <script src=\"../../assets/js/html5shiv.js\"></script>
    <script src=\"../../assets/js/respond.min.js\"></script>
    <![endif]–>
    </head>
    <body>
    <div class=\"container\">
    <a data-toggle=\"modal\" href=\"#example\" class=\"btn btn-primary btn-large\">Abrir ventana modal</a>
    <div id=\"example\" class=\".modal.fade .modal-dialog \" style=\"display: none;\">
    <div class=\"modal-header\">
    <a data-dismiss=\"modal\" class=\"close\">×</a>
    <h3>Cabecera de la ventana</h3>
    </div>
    <div class=\"modal-body\">
    <h4>Texto de la ventana</h4>
    <p>Mas texto en la ventana.</p>
    </div>
    <div class=\"modal-footer\">
    <a href=\"index.html\" class=\"btn btn-success\">Guardar</a>
    <a href=\"#\" data-dismiss=\"modal\" class=\"btn\">Cerrar</a>
    </div>
    </div>
    <!– jQuery (necessary for Bootstrap\’s JavaScript plugins) –>
    <script src=\"js/jquery-1.9.1.js\"></script>
    <!– Include all compiled plugins (below), or include individual files as needed –>
    <script src=\"js/bootstrap.js\"></script>
    <script src=\"js/modal.js\"></script>

    </body>

    </html>

  6. Joel Corona dice:

    Tengo un problema con un modal, cuando se abre se vuelve a cerrar, ¿a alguién le ha pasado? y si es así ¿cómo lo solucionó?

  7. Victor Báez dice:

    Me funcionó a la perfección, muchas gracias por este gran aporte

  8. reynaldo dice:

    donde puedo descargar los archivos utilizados

    • Jose Aguilar dice:

      Viendo el código fuente del ejemplo

      • juan pablo dice:

        aparte de lo que se ve en el codigo fuente, hay que implementar algun codigo js?porque se oscurece la pantalla pero no me aparece el cuadro de dialogo.desde ya gracias

        • Jose Aguilar dice:

          Hola buenos días,

          En principio no, con lo que aparece debería funcionar. Lo único que te puedo decir asi a simple vista es que revises la versión de jquery ques estás utilizando.

          Podrías poner el enlace a tu página para ver el problema?

          Saludos

  9. Juan David dice:

    Hola, como hago para cargar un modal llamandolo desde otro documento html; es decir tener mi modal almacenado en modal.html y abrirlo en index.html. Gracias!

  10. osvaldo dice:

    no me funciona me oscurese la pantalla pero no me aparece la ventana

  11. Aime dice:

    hola como están? quisiera que se viera el modal solo si se tilda el checkbox, ¿se puede hacer esto y como ? soy novata en esto, peo aprendiendo 🙂 muchas gracias.

  12. Lina Santos dice:

    Hola,

    Tentei que funcionasse no Prestashop 1.6 mas não funciona :(. Alguém me pode ajudar, coloquei o código no header.tpl e no footer.tpl. Sou nova nisto.

    Gracias

  13. Ricardo Andree dice:

    excelente estimado, me sirvió de mucho

  14. Eduardo dice:

    hola queria saber si es posible poner dos modals, digamos uno en primer plano y un segundo que aparesca por delante del anterior

  15. hector dice:

    buen aporte, lo implemente de la siguiente forma.
    Abri un video de youtube en el modal pero al cerra la ventana el video se sigue escuchando, yo quisiera que al cerrar la ventana modal tambien se cierre el video

  16. Cesar Romo dice:

    Buenas Tardes, como se podria llamar a la ventana modal desde otra ubicacion, es decir colocar el codigo de la ventana modal en un archivo(xxxx.php) y hacer la llamada desde el boton, alguien que me pueda apoyar.
    Saludos

  17. victor dice:

    bro como lo llamo al cargar el dom, no se xq no me deja …

  18. Ana Yaneth dice:

    Hola disculpa quisiera saber como es la función del modal en un js

  19. Camilo Soto dice:

    Buenos Dias,

    Me gustaria saber como puedo abrir un popou y pasarle datos para editar de una tabla

  20. Cesar Romo dice:

    Jose Aguilar:
    Tengo un detalle con modal bootstrap, resulta que tengo una lista hecha con dataTable, muestra cierta información y despliega tres botones, con cualquiera de los botones al hacer click despliega una ventana modal, dentro de esta ventana se despliega cierta información y tres botones, al hacer click en cualquiera de los botones debería abrir una ventana modal con un formulario, resulta que el formulario me lo abre en la ventana modal previa, y posteriormente abre una ventana modal sin datos y no he podido resolver este detalle, que se cierre la ventana modal previa, y que despliegue el contenido en una ventana modal nueva.

    Saludos

  21. VH dice:

    todo ok pero deberia cerrar cuando das en el boton cerrar no cuando pulses en cualquier parte de la ventana

  22. oscar ballesteros dice:

    hola quisiera saber como capturo el evento al pinchar el boton cerrar, es decir cuando cierra la modal quiero recargar la pagina completa.
    de antemano gracias por al ayuda

    • Jose Aguilar dice:

      Hola buenos días,

      En las opciones del plugin no veo disponible la captura del evento cerrar. Quizá lo puedes implementar tu empleando algo como lo siguiente:

      $(‘.close’).on(‘click’, funciton() {
      //tu código para redireccionar
      });

      Saludos

  23. JdelRosario dice:

    Gracias por el código, quisiera colocar un botton, que en lugar de decir “Guardar”, diga “Print” e imprima solamente el documento que se encuentra dentro del modal. El documento es un .pdf.

    Muchas gracias y saludos cordiales

  24. […] Ejercicio de Clase – Ventana Modal. Descargar Aquí 4.1. Nuevo código para ventanas Modales. Leer Más 4.2. Ventana Modal sencilla sin Javascript. Leer Más 5. Saber Trabajar con templates free y su […]

  25. emilio dice:

    y si yo quiero que aunque recargue la venta solo se actualice el contenido y no se me cierre la modal como se haria ? de verdad no tengo idea de como

  26. leon dice:

    Hola! como puedo hacer para mostrar el modal luego de unos segundos en el sitio?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.