Popup con Bootstrap y JQuery. Código y vídeo explicativo

Bienvenidos a VerTutoriales.com en esta ocasión voy a explicar a la vez de dar solución a un seguidor de como crear un popup ayudándonos de Bootstrap y JQuery. Aunque continúo programando y ampliando el código del gestor de juegos de rol, voy a ir desarrollando los tutoriales según corresponda al código que implemento.

Esto es así ya que muchas funciones que pueden explicarse en un artículo independiente, al explicarlo en conjunto con una funcionalidad del programa se me hacían demasiado largas y entiendo que también aburridas para vosotr@s, así que sin más dilación, os dejo el código del popup y paso a explicarlo:

Antes de empezar

Bootstrap es un framework creado por Twitter y como tal hay que añadirlo a nuestro proyecto para que funcione correctamente, pero además Bootstrap se nutre de JQuery, por lo que también es necesario insertarlo en nuestro proyecto. Para ello podéis buscar todo en http://getbootstrap.com/

Código de Popup con Bootstrap

<!-- Modal Escenario-->
<div class="modal fade" id="popupNuevaAventura" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
        <h4 class="modal-title" id="myModalLabel">Creando una nueva aventura</h4>
      </div>
      <div id="nuevaAventura" class="modal-body">
            <form role="form">
              <div class="form-group">
                <label for="nombreAventura">Nombre de la aventura</label>
                <input type="text" class="form-control" id="nombreAventura" placeholder="Reinos de Papel y los dados trucados..." required>
              </div>
              <div class="form-group">
                <label for="tiempoJuego">Tiempo estimado de juego</label>
                <input type="number" class="form-control" id="tiempoJuego" placeholder="7 horas" required>                      
              </div>
              <div class="form-group">
                <label for="nivelJuego">Nivel de los jugadores</label>
                <input type="number" class="form-control" id="nivelJuego"  placeholder="2" required>
              </div>             
           </form>      
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-success" id="botonAventura" onClick="nuevaAventura()">Crear</button>        
      </div>
    </div>
  </div>
</div>

Lo más destacable es el id del PopUp “popupNuevaAventura” y a continuación se añade todo lo que vaya en la cabecera. Está la clase de moda-title, será donde aparece el título de la ventana de nuestro popup en bootstrap. A continuación tenemos el modal-body, en mi caso lo nombro con el id nuevaAventura, aunque no le doy uso esta vez 😉 en otras ocasiones puede servirnos para carga la información al vuelo en el popup.

En nuestro caso, he añadido un formulario con 3 campos, es código html sin más. Para terminar en el modal-footer, irá el contenido del pie, en mi caso tengo dos botones, uno con data-dismiss=”modal” que indica que al ser pulsado se cerrará la ventana, es el botón con el texto de Cerrar y otro botón con el texto Crear que al ser pulsado llama a la función nuevaAventura que se verá en otro artículo como hace la llamada y registra la aventura. En el vídeo se ve algo más 😉

Llamada al PopUp de Bootstrap

Nada más sencillo que definir el data-toggle en modal y designar el data-target con el nombre de nuestra capa, en este caso popupNuevaAventura, tal y como muestro en el ejemplo incrustado en un botón:

<button class="btn btn-default" data-toggle="modal" data-target="#popupNuevaAventura">Crear nueva</button>

Podéis ver un ejemplo de este PopUp con Bootstrap en este enlace

Esto no tiene más historia! bueno sí, recordad que tenéis que añadir la librería de JQuery y por supuesto la de Boostrap que sino nada de esto os servirá!

 

 

Te puede interesar:

22 comentarios

  • Christopher commented on 20 noviembre, 2014 Reply

    Podrias compartir los archivos, quiero hacer un popup como ese!!! Te agradecería mucho

  • josue ricaurte commented on 11 septiembre, 2015 Reply

    Gracias amigo era lo que buscaba, buena información.

    • Carlos Dk commented on 6 octubre, 2015 Reply

      Me alegro de que te ayudara el código 😉

  • Josu commented on 10 diciembre, 2015 Reply

    Perfecto, muchísimas gracias por el aporte.

    Me surge una duda… ¿ y si quiero recibir un parametro en esa pantalla modal?

    Por ejemplo… una valor para saber si se abre de un botón u otro…

    • Carlos Dk commented on 12 diciembre, 2015 Reply

      Buenas Josu

      Ten en cuenta que la ventana modal trabajada desde bootstrap y Jquery está siendo vista con un trabajo de capas en CSS, por lo que todo pertenece al mismo documento, ese “pasar” parámetro pertenece a la misma página en la que estás trabajando, por lo que si llamas al evento modal(“show”) desde un botón u otro, podrás controlarlo antes de lanzar el popup bootstrap.

      Si estás pensando en algo concreto, coméntalo y puedo intentar ayudarte con más información sobre bootstrap 😉

  • francisco commented on 6 enero, 2016 Reply

    muy buen aporte, gracias.

    he estado tratando de pasar un parametro a la ventana modal, tengo entendido que es con una funcion, pero por mas que busco no encuentro la solucion.
    me gustaria me ayudaras

    • Carlos Dk commented on 7 enero, 2016 Reply

      La ventana popup, no es más que un formato HTML que se le da la funcionalidad de superponerse por encima del resto de la página y oscurecer todo lo que haya quedado detrás. Con ello quiero decir, que si utilizas un .html o .append de JQuery podrás añadir el contenido que quieras dentro de la “ventana” en este caso capa que indiques.

      El pasar “parámetros” entiendo que no te hará falta, ya que en toda la página estarás trabajando con las variables que tengas declaradas como globales 😉

      De todas maneras, si explicas con más información te podré ayudar con más exactitud.
      Un saludo!

  • francisco commented on 7 enero, 2016 Reply

    Gracias por contestar,
    estoy trabajando con postgres, tengo una tabla donde obtengo algunos datos de la base de datos, por ejemplo codigo, inscripcion, fecha. Y lo que quiero realizar es por ejemplo al dar click en el codigo, me aparezca la ventana modal con todos los datos pertenecientes al codigo seleccionado.

    • Carlos Dk commented on 8 enero, 2016 Reply

      En ese caso, creo que al hacer clic en la función que carga los datos, por ejemplo: “cargarDatos()” que añadiera esos datos en la ventana del popup y luego lanzaría la visualización del mismo.

      function cargarDatos(){
      $(“#datospopup”).html(“aquí la información a mostrar”);
      $(“#ventanapopup”).modal(‘show’);
      }

      No recuerdo si era así el mostrar el popup, pero prueba, sino Google te dirá 😉
      Un saludo!

  • adolfo rodriguez commented on 14 marzo, 2016 Reply

    tengo varias ventanas modales en un programa y dependiendo de la ubicacion del codigo de estas es que se me habren unas y no otras. que falta hacer?

    • Carlos Dk commented on 14 marzo, 2016 Reply

      Pues sin ver el código difícil saber que te pasa… pero revisaría los nombres de los objetos, seguramente algunos estén duplicados, ten en cuenta que cuando se pulsa un botón o alguna opción que dispare el evento que abre o cierra la ventana, tiene que estar identificado por el “id”, así que repasaría primero los id de las etiquetas de esos objetos html a ver que puede estar ocurriendo.

      Espero te sirva. Salud!

  • Sergio commented on 17 octubre, 2016 Reply

    Hola, serías tan amable de ayudarme con este caso. Estoy tratando de implementar esto en un link (con una imagen), que está dentro de una tabla y no me resulta. Acá el script :

    ×
    Modal title

    One fine body…

    Close
    Save changes



    • Carlos Dk commented on 24 octubre, 2016 Reply

      No aparecerá el código, mmm tendrás que ponerlo en código utf-8 o meterlo dentro de alguna etiqueta para que lo pueda ver 🙂

  • Luis commented on 31 diciembre, 2016 Reply

    Buenas, muchas gracias por compartir, me ha servido de mucho. Pero hay una cosa que no me sale, te explico. Quiero que la ventana aparezca cuando se cumpla una condición, sin necesidad de pinchar en ningún botón ni nada. He metido la parte del html en la vista y luego me voy a al .js para indicarle cuando quiero que aparezca la ventana, entiendo que hay que poner $(“#popupNuevaAventura”).modal(‘show’); pero no me la muestra… ¿por qué puede ser?

    Un saludo y muchas gracias de nuevo por compartir.

    • Carlos Dk commented on 7 enero, 2017 Reply

      Buenas Luis

      En principio la llamada está correcta, revisa que el nombre de la ventana (del div) sea el correcto y que la llamada esté dentro de la secuencia o flujo del script.

      También revisa la consola por si tuvieras algún tipo de error que se te esté pasando 😉

      Espero que lo puedas solucionar, por aquí me tienes si aún sigues dándole vueltas!
      Un saludo!

  • jose commented on 10 enero, 2017 Reply

    Hola Carlos, buenas
    Muy buen artículo, buen trabajo.

    Una duda si quisiera que el poup se abra cuando muevo el ratón con intención de ir a cerrar la pagina en la que estoy. Como se llamaría a la modal??

    Gracias.

    • Carlos Dk commented on 11 enero, 2017 Reply

      Bueno, solo se podría saber si está intentando cerrar la ventana o quizás controlando la posición del ratón, pero esta segunda opción sería demasiado intrusiva para el usuario.

      La llamada no es más que $(“#cajaModal”).modal(“show”) para mostrar y $(“#cajaModal”).modal(“hide”) para ocultarla, con meter la llamada js en el evento de cerrar la ventana.

      Busca sobre window.onbeforeunload

      Ya me dices si te entendí bien y te sirvió!

      Salud!

  • jose commented on 11 enero, 2017 Reply

    La idea es que cuando un usuario navegue en tu página y vaya a cerrar la pagina para irse, en ese momento en el que el raton va hacia arriba, se abra la ventana modal.
    No se si me esplico bien.
    Gracias por tu paciencia Carlos, nuevamente.
    Un saludo

Deja un comentario

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