Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

CSS Conceptos básicos de Bootstrap Usar Componentes Bootstrap Visualización de una Ventana Modal

Publicado por zkb
.a{fill-rule:evenodd;}techdegree seal-36
zkb
Desarrollo Web Front End Graduado de Techdegree 13,636 Puntos

Modal no se muestra aunque seguí el vídeo exactamente

He pegado mi código para los botones y modal a continuación. No funciona como indica el video. Mi modal no se muestra cuando he hecho clic en los botones aunque los he especificado en el destino de datos del botón. ¿Qué está pasando aquí..?

<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#register">Registrarse Ahora</button>

<button type="button" class="btn btn-outline-info btn-lg d-block mx-auto my-5" data-bs-toggle="modal" data-bs-target="#register">No Te Lo Pierdas, Regístrate Ahora</button>

<div class="modal fade" id="register" tabindex="-1" aria-labelledby="register form" aria-hidden="true">

Steven Parker
Steven Parker
244 163 puntos
Steven Parker
Steven Parker
244 163 puntos

Al publicar código, siempre usa Formato Markdown para preservar la apariencia del código y mantener símbolos especiales. Una forma aún mejor de compartir código y facilitar la replicación de tu problema es crear un captura de pantalla de tu espacio de trabajo y publica el enlace aquí.

2 Respuestas

Paul Crawford
Paul Crawford
5,371 Puntos

Intenta eliminar las comillas donde tienes button, así que en lugar de ---"button" class= --- elimina la segunda ---"--- para que quede ---"button class =---

Thomas Grimes
Thomas Grimes
10,726 Puntos
Thomas Grimes
Thomas Grimes
10,726 Puntos

Tenía el mismo problema, pero logré resolverlo actualizando los enlaces CDN de CSS y JS utilizados en el espacio de trabajo a la versión actual de Bootstrap, aquí: https://getbootstrap.com/docs/5.3/getting-started/download/

Los atributos en la versión utilizada en el video no tienen "bs-".

Etiqueta de botón de video:

<botón type=button class=btn btn-primary btn-lg data-bs-toggle=modal data-bs-target=#register>Regístrate ahora</botón>

Etiqueta de botón de Bootstrap versión 5.3:

<botón type=button class=btn btn-primary btn-lg data-bs-toggle=modal data-bs-target=#register>Regístrate ahora</botón>

Si actualizas los enlaces CDN o simplemente eliminas "bs-" de los dos atributos, debería funcionar.