Comment créer et afficher une modal en HTML

Afficher des modals
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Bootstrap - Le Framework Front-End
Revoir le teaser Je m'abonne
2,5
Transcription

Cette leçon fait partie de la formation
49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
2,5
Cette leçon fait partie de la formation
49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de maîtriser la création d'une modal avec Bootstrap, de savoir la tagger correctement dans HTML, et de comprendre comment ajouter des effets de transition pour une meilleure expérience utilisateur.

Apprenez à créer et afficher une modal en cliquant sur un bouton avec Bootstrap.

Dans cette leçon, vous apprendrez à créer et afficher une modal en utilisant Bootstrap, un framework CSS. Une modal est une boîte de dialogue ou une fenêtre qui apparaît sur votre page actuelle, souvent utilisée pour des interactions utilisateur comme des formulaires et des confirmations.

Nous commencerons par créer la structure HTML de notre modal en ajoutant les différentes sections : header, body, et footer. Le header contiendra un titre et un bouton pour fermer la modal. Le body sera utilisé pour placer le contenu de la modal, et le footer contiendra des boutons d'action comme 'Valider' ou 'Exporter'.

Ensuite, nous apprendrons à faire apparaître cette modal en cliquant sur un bouton spécifique. Pour cela, nous attribuerons des attributs tels que data-toggle et data-target au bouton pour associer la modal avec celui-ci. Enfin, nous appliquerons la classe fade pour ajouter un effet de transition afin d'améliorer l'expérience utilisateur.

À la fin de cette leçon, vous serez capable de créer et manipuler des modals dans vos projets web, rendant ainsi vos interfaces utilisateur plus interactives et intuitives.

Voir plus
Questions réponses
Qu'est-ce qu'une modal en HTML ?
Une modal est une boîte de dialogue ou une fenêtre en surimpression qui interrompt le flux de travail pour capturer l'attention de l'utilisateur ou recueillir des informations cruciales.
Pourquoi utiliser Bootstrap pour créer des modals ?
Bootstrap facilite la création de modals avec des styles prédéfinis et des fonctionnalités intégrées telles que les animations et la gestion des événements.
Comment ajouter une transition à une modal ?
Pour ajouter une transition à une modal, vous pouvez utiliser la classe Bootstrap fade, qui ajoute un effet de transition en douceur lors de l'apparition et de la disparition de la modal.
2 commentaires
2,5
2 votes
5
4
3
2
1
ideal.micro40
Il y a 1 semaine
video sur Bootstrap 3 alors qu'on est sur la version 5.3.6.
on parle de jquery alors que dans la version il n'y est plus
on nous parle de phpstorm comme editeur qui est payant voir lez bloc note (au secours !!!)
il y a vscode qui maintenant est utiliser par quasi tous les développeurs et qui est gratuit.

sur la video : Maîtriser les Grilles et Colonnes dans Bootstrap
1 - le cours annonce la modification pour passer sur 4 colonne puis de changer les titres,
a ce moment la on reviens en arrière à la modification pour passer en 4 colonnes... et ça recommence
grosse erreur de montage.

2 - ensuite push et pull ont été supprimé pour utiliser le système flexbox sur la version 5
avec les classes order pour gérer l'ordre des colonnes.

3 - l'explication sur le offset n'est absolument pas claire :
on a une première explication, puis une deuxième qui est la même mais avec le résultat directe avec offset.

bref je vais être franc j'ai trouver une formation sur udemy sur bootstrap 5 bien plus intéressante, je ne trouve pas normal d'avoir une formation sur bootstrap 3 qui nous induit en erreur.
ayant passer ce premier chapitre j’arrête car je ne vois aucun intérêt à continuer.
Stephd
Il y a 4 ans
tres bonne formation c est une bonne decouverte generale.