debemos poner la palabara bs- es por BOOTSTRAP 5
data-bs-toggle="modal" data-bs-target="#modalCompra
Introducción al curso
Repositorio del curso de bootstrap
Bootstrap 4 ¿Qué trae de nuevo esta versión?
¿Que es un framework de frontend?
Nuestro Proyecto: Hola Mundo de Bootstrap
Creando el sitio web
La grilla de Bootstrap
Reto: La grilla de Bootstrap
El footer
El header de nuestro sitio
Creando un carousel de imágenes
Agregando texto informativo del evento
Agregando botones
Las cards de Bootstrap 4
Pastillas de texto
Agregando un contenedor de ancho completo
Los formularios de Bootstrap 4
Agregando un tooltip
Scrollspy: Conociendo la ubicación del usuario en el header
Agregando un modal para comprar tickets
Un nuevo formulario para completar la compra
Deploy a producción
Poniendo nuestro sitio en producción
Conclusiones del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Agregando un modal para comprar tickets
18/21Recursos
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 15
Ordenar por:
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]”’.
actualicen el curso !!!
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.
gracias , ire a implementar modals a mi intranet
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”
Modal = ventana emergente lol
vaya que sencillo realizar modales
Con cada video me enamoro mas de boostrap
Modal aplicado al proyecto:
útil y sencillo. ❤️
Hola Sacha, Hay alguna integración de Bootstrap con Vue?
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…
Genial
Los modal le dan un diseño único a la página web.
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.
me encanto!!!
Muy buena clase introductoria a los modals en Bootstrap!!!
Muy sencillo (ordenado).
que facil es hacer un modal con bootstrap
Muy fácil cargar un modal con bootstrap, gracias.
Interesante el modal de compra, no sabia con que elemento se colocaba.
Muy buena clase
Sigamos Aprendiendo 😄
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>```
Gran clase!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?