Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Agregando un modal para comprar tickets

18/21
Recursos

En esta clase aprenderemos sobre los modals, que son básicamente mostrar un mensaje en una ventana emergente. Conoce más sobre los modals aquí: https://getbootstrap.com/docs/4.1/components/modal/

Aportes 31

Preguntas 14

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

debemos poner la palabara bs- es por BOOTSTRAP 5

data-bs-toggle="modal" data-bs-target="#modalCompra

Para implementar un modal debemos:

  • Copiar el contenido HTML del modal como tal (mas no del botón). Es recomendable poner los modals fuera de cualquier otro elemento HTML (por ejemplo, al final de todas las secciones incluyendo el footer).
  • Se recomienda cambiarle el nombre al id del modal, para una mejor legibilidad.
  • Debemos asignar al ítem de navegación que abrirá el modal, las clases de ‘.data-toggle=”modal”’ y ‘”.data-target=”[#idDelContenidoHTMLDelModal]”’.

En Bootstrap 5.0 podemos encontrar toda la documentacion aqui:
https://getbootstrap.com/docs/5.0/components/modal/

El codigo del Modal es este:

<div class="modal fade" id="modalCompra" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

Y el codigo de los botones de Comprar Tickets es este:

<a class="nav-link text-platzi" href="#" data-bs-toggle="modal" data-bs-target="#modalCompra">Comprar Tickets</a>

Los modals se crean con HTML, CSS y JavaScript. Se colocan sobre todo lo demás en el documento y eliminan el desplazamiento del <body>para que el contenido modal se desplace en su lugar.
Al hacer clic en el “fondo” modal, se cerrará automáticamente el modal.
Bootstrap solo admite una ventana modal a la vez. Los modales anidados no son compatibles, ya que creemos que son malas experiencias de usuario.
Uso de modalidades position: fixed, que a veces puede ser un poco particular sobre su representación. Siempre que sea posible, coloque su HTML modal en una posición de nivel superior para evitar posibles interferencias de otros elementos. Es probable que tenga problemas al anidar un .modaldentro de otro elemento fijo.
Una vez más, debido a que position: fixedhay algunas advertencias sobre el uso de modales en dispositivos móviles. Consulte nuestros documentos de soporte del navegador para más detalles.
Debido a cómo HTML5 define su semántica, el autofocusatributo HTML no tiene efecto en los modales de Bootstrap. Para lograr el mismo efecto, use algunos JavaScript personalizados:

Para un sitio web rápido y sencillo es perfecto, pero creo que esto para un proyecto a largo plazo será un suicidio usar bootstrap.

Me parece muy práctico, se pierde un poco la esencia de codificar pero es demasiado funcional. Me gusta Bootstrap.

Nunca había usado un modal de Bootstrap y que fácil es!!
🌐 Les comparto el código de mi proyecto en GitHub: https://github.com/iJCode1/bootstrap4_platzi
.
Resultado:

gracias , ire a implementar modals a mi intranet

Modal = ventana emergente lol

vaya que sencillo realizar modales

Con cada video me enamoro mas de boostrap

En caso de que queramos usar el modal automáticamente para cuando la página se abra es muy fácil. Simplementete hay que agregar el siguiente script:

//Lanzar un modal autmáticamente
$(document).ready(function () {
  $("#IdDelModal").modal("show");
});

Esto puede ser útil para advertir al usuario en estado de contingencias: Ej: “Debido a las lluvias la tienda estará cerrada hoy y mañana”

me encanto!!!

Muy buena clase

Muy buena clase introductoria a los modals en Bootstrap!!!

Muy sencillo (ordenado).

Genial

Hola Sacha, Hay alguna integración de Bootstrap con Vue?

+2

que facil es hacer un modal con bootstrap

útil y sencillo. ❤️

Muy fácil cargar un modal con bootstrap, gracias.

Modal son ventanas emergentes, que ayudan a realizar acciones o mostrar información que no deseamos estén siempre visibles en nuestra página web.

Los modal le dan un diseño único a la página web.

Me encanta la simpleza de Bootstrap, es cierto que el Html se extiende pero quizá si utilizamos Pug podemos separarlo por módulos y hacerlo mas mantenible, aunque no sé si Pug es compatible con Bootstrap…

Sigamos Aprendiendo 😄

Interesante el modal de compra, no sabia con que elemento se colocaba.

Gran clase!

También se le puede poner el enlace del modal a cualquier elemento caja.

          <div class="container">
              <div class="row">
                  <div class="col-3" style="background-color: black; color: white;"  data-bs-toggle="modal" data-bs-target="#exampleModal">
                    <p>Aquí también da clic</p>
                  </div>
              </div>
          </div>```

f