Agregando un modal para comprar tickets

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>

Raycris Maldonado

debemos poner la palabara bs- es por BOOTSTRAP 5

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

Enrique Garcia Stave

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]”’.

Christian David Sánchez

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:

Héctor Daniel Hernández Castillo

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.

Jhon Alexander Perez Valencia

https://getbootstrap.com/docs/4.1/components/modal/

Modals

Juan Camilo Castillo Camacho

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

wladimir briceño

hace 13 días

actualicen el curso !!!

Joel Dominguez Merino

hace un año

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:

Juan Guillermo Perez Cardozo

gracias , ire a implementar modals a mi intranet

Jose Morales Varon

Modal = ventana emergente lol

Pamela Cinthya Torres Gutiérrez

vaya que sencillo realizar modales

Cristhian Franco

Con cada video me enamoro mas de boostrap

Cristobal Peña

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”

Jorge Fidel Zubieta Choque

me encanto!!!

Andrés David Loaiza Zamudio

Muy buena clase

Noe de Jesus Muñoz Martinez

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

Christian Velázquez

Muy sencillo (ordenado).

Christian Andres Moreno Ceballos

Genial

Jesús Matías Mondragón

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

Sergio Díaz Fernández

Camilo Alexander Velandia Velandia

que facil es hacer un modal con bootstrap

innacroft

útil y sencillo. ❤️

leonardc

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

Jimmy Buriticá Londoño

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.

Luis Fernando Zarazua Aguilar

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

Gonzalo Pimentel

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…

Jhonatan David Ibarra Lavado

Sigamos Aprendiendo 😄

Alex Garzon

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

Fernando Galdós

Gran clase!

Angel Raúl Acosta Rojas

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

Naldo Duran