Créer des boîtes modales responsives

Introduction

Dans ce projet, vous allez apprendre à créer un composant de boîte modale qui peut être affiché et caché sur une page web. Les boîtes modales sont couramment utilisées dans les applications web pour afficher du contenu supplémentaire ou des formulaires sans quitter la page actuelle.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer la structure HTML d'une boîte modale
• Comment implémenter la fonctionnalité pour afficher et cacher la boîte modale
• Comment gérer la propagation d'événements pour empêcher la boîte modale d'être affichée à nouveau après avoir été cachée

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Créer une boîte modale à l'aide de HTML, CSS et JavaScript
• Utiliser des fonctions JavaScript pour contrôler la visibilité de la boîte modale
• Empêcher la propagation d'événements pour vous assurer que la boîte modale se comporte comme prévu

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── bootstrap.min.css
├── bootstrap.min.js
├── index.html
├── jquery.min.js
└── style.css

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement la page pour la voir.

Implémenter la fonctionnalité d'affichage et de masquage

Dans cette étape, vous allez apprendre à implémenter la fonctionnalité d'affichage et de masquage de la boîte modale.

1. Localisez la section <script> en bas du fichier index.html.
2. Dans la section <script>, vous trouverez le code suivant :

// TODO
let signModalDoc = document.querySelector("#myModal");
function handleClick(e) {
  signModalDoc.style.display = "block";
  event.stopPropagation();
}
function handleOk(e) {
  signModalDoc.style.display = "none";
  event.stopPropagation();
}

3. Comprenez le but de chaque fonction :

   • handleClick(e) : Cette fonction est appelée lorsque le bouton "S'inscrire maintenant" est cliqué. Elle définit la propriété display de la boîte modale sur 'block', ce qui rend la boîte modale visible.
   • handleOk(e) : Cette fonction est appelée lorsque le bouton de fermeture "X" ou le bouton "OK" à l'intérieur de la boîte modale est cliqué. Elle définit la propriété display de la boîte modale sur 'none', ce qui masque la boîte modale.

4. La ligne event.stopPropagation() dans les deux fonctions est utilisée pour empêcher l'événement de clic de remonter jusqu'aux éléments parents, ce qui pourrait causer l'affichage à nouveau de la boîte modale après qu'elle ait été masquée.

Tester la fonctionnalité

1. Enregistrez le fichier index.html.
2. Rafraîchissez la page web dans votre navigateur.
3. Cliquez sur le bouton "S'inscrire maintenant" pour voir la boîte modale apparaître.
4. Cliquez sur le bouton de fermeture "X" ou le bouton "OK" à l'intérieur de la boîte modale pour voir la boîte modale disparaître. L'effet final devrait être le suivant :

Félicitations! Vous avez réussi à implémenter la fonctionnalité d'affichage et de masquage pour la boîte modale.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.