No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

5D
19H
35M
14S

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 32

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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>

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=鈥漨odal鈥濃 y 鈥樷.data-target=鈥漑#idDelContenidoHTMLDelModal]鈥濃.

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 鈥渇ondo鈥 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.

actualicen el curso !!!

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: 鈥淒ebido 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