Agregando un modal para comprar tickets

Resumen

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/

Raycris Maldonado

student•

debemos poner la palabara bs- es por BOOTSTRAP 5

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

Enrique Garcia Stave

student•

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

wladimir briceño

student•

actualicen el curso !!!

Christopher Sánchez García

student•

si por favooorrr 😭

nadia arroyo

student•

lo estoy tomando pero de verdad que esta muy atrasado :(

Christian David Sánchez

student•

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:

Manuel Daza

student•

Puedo crear un Modal en un archivo html externo y llamarlo desde el index?
es decir colocarlo en un archivo modal.html y el boton colocarlo en el indx.html??

Diego Forero

Team Platzi•

Con un template engine no es complicado, pero usando solo html debes crear un iframe para traer el html del modal.

Facundo Nicolás García Martoni

teacher•

@Gollum, que es un template engine? 🤔

Hugo Luis Yamunaque Nima

student•

Buenas Tardes, la consulta que deseo realizar , es como se puede hacer que el modal se muestre al momento de iniciar la web

Victor Jaramillo

student•

me parece que podrias realizarlo mediante JavaScript usando la función cuando el documento esta listo, algo parecido a lo siguiente:

$( document ).ready(function() { $("#myModal").modal(); });

Harold David Avila Sabogal

student•

muchas gracias por la información

Héctor Daniel Hernández Castillo

student•

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.

Guillermo Baldán López

student•

Depende del tamaño del proyecto

Juan Esteban Galvis

student•

Por qué lo dices?

Juan Camilo Castillo Camacho

student•

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

Oscar Yunior Huarza

student•

Se puede usar Bootstrap en Pug ?

Carlos Eduardo Gomez García

teacher•

¡Hola!, Bootstrap es independiente de los preprocesadores que uses para tu HTML, esto quiere decir que a Bootstrap no le importa qué procesador estés usando, mientras ese procesador te permita añadir clases en tus etiquetas HTML Bootstrap va a funcionar porque a Bootstrap solo le interesa que sus clases estén disponibles en tu HTML para aplicarle sus estilos.

Recuerda que al final cualquier preprocesador HTML va a convertir todo tu código a HTML de verdad, que estos contendrán las clases de Bootstrap, por lo que Bootstrap va a funcionar :D

Oscar Yunior Huarza

student•

Pero es recomendable usar Pug y bootstrap?

Juan Guillermo Perez Cardozo

student•

gracias , ire a implementar modals a mi intranet

Facundo Nicolás García Martoni

teacher•

What jajajajaja

Samuel Sobalvarro

student•

xdxd

Cristobal Peña

student•

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"

Kathion Vega

student•

Modals ,componente muy importante de los frameworks frontend, la capacidad que tienen de mostrar un mensaje en una ventana emergente.

Jose Morales Varon

student•

Modal = ventana emergente lol

Pamela Cinthya Torres Gutiérrez

student•

vaya que sencillo realizar modales

Cristhian Franco

student•

Con cada video me enamoro mas de boostrap

Daiana Isabel Gamez Vivas

student•

Modal aplicado al proyecto:

Daniel Goñas

student•

los botones de mi modal no funcionan :C

  <div class="modal fade" id="modalCompra" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h6>
            <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>

Daniel Goñas

student•

se bugeo el codigo xd

  <div class="modal fade" id="modalCompra" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h6>
            <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>```

Daniel Goñas

student•

ya encontre el problema técnicamente :/

no me deja utilizar los botones x alguna razon xq la etiqueta que utilizo para "comprar tickets" es una "<a>" y parece q tengo que ponerle un atributo que es "data-bs-toggle='modal' " y si lo pongo deja de funcionar, pero si lo pongo en button funciona correctamente, pues cambiare todo parece xd

Donal Guillermo García Jauregui

student•

Estoy usando bootstrap 4.1 y solo me funciona el modal del Buttom, y el del link no. ¿Alguien me puede orientar? Por favor

<a class="nav-link disabled text-platzi" href="#" data-bs-toggle="modal" data-bs-target="#modalCompra">Compra de Ticket</a>

<button type="button" class="btn btn-platzi" data-bs-toggle="modal" data-bs-target="#modalCompra">Comprar Tickets</button>

<div class="modal fade" id="modalCompra" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- /Modal-->

Alejandro Sanchez

student•

Es buena practica modificar los id de los elementos???

Erik Elyager

student•

No entiendo del todo tu pregunta. El ID de un elemento es un identificador único, cambiarlos en sí no es buena o mala práctica. Si es necesario se hace, teniendo cuidado de cambiarlo en todos los lugares donde se usa ese ID.

Lo que sí son malas practicas es usar el mismo ID para varios elementos, o usar el ID para dar estilos CSS.

Andrea Castrillón Puerta

student•

Me funciona el modal del botón del header, pero no el otro. No entiendo aún qué es lo que está mal.

Bulmaro Arellano Navarrete

student•

Hola,

Si nos compartieras tu proyecto a través de un repositorio en tu perfil de Github estaría genial o mínimo, comparte el código del proyecto por este medio.

Saludos

  <div class="modal fade" id="modalCompra" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h6>
            <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>

  <div class="modal fade" id="modalCompra" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h6>
            <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>```

<div class="modal fade" id="modalCompra" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- /Modal-->

Agregando un modal para comprar tickets

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