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

[codesyntax lang=”html4strict”]

<!-- 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>

[/codesyntax]

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:

[codesyntax lang=”html4strict”]

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

[/codesyntax]

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á!