Dans ce tutoriel, nous allons créer des modales interactives en utilisant uniquement HTML et CSS. Les modales sont des fenêtres contextuelles qui apparaissent au-dessus du contenu principal de la page. Nous allons créer deux modales différentes avec des styles personnalisés.
Étape 1 : Structure HTML
Commençons par créer la structure HTML de base. Nous allons utiliser des boutons pour ouvrir les modales et des divs pour contenir le contenu des modales.
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Popover</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<button popovertarget="modale1">Ouvrir modale 1</button>
<button popovertarget="modale2">Ouvrir modale 2</button>
<div popover id="modale1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, voluptatibus!
<button popovertarget="modale1" class="btn-close">X</button>
<a href="#">Confirmer</a>
<button popovertarget="modale1" class="btn-cancel">Annuler</button>
</div>
<div popover id="modale2">
Ceci est le texte de la modale 2
<button popovertarget="modale2">Fermer</button>
</div>
</body>
</html>Explication du Code HTML
Doctype et Langue :
<!doctype html>: Déclare le document comme étant du HTML5.<html lang="fr">: Définit la langue du document comme étant le français.
Head :
<meta charset="UTF-8">: Définit l'encodage des caractères comme étant UTF-8.<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">: Assure que la page est réactive et s'adapte à la taille de l'écran.<meta http-equiv="X-UA-Compatible" content="ie=edge">: Assure la compatibilité avec Internet Explorer.<title>Popover</title>: Définit le titre de la page.<link rel="stylesheet" href="css/styles.css">: Lie la feuille de style CSS externe.
Body :
<button popovertarget="modale1">Ouvrir modale 1</button>: Bouton pour ouvrir la modale 1.<button popovertarget="modale2">Ouvrir modale 2</button>: Bouton pour ouvrir la modale 2.<div popover id="modale1">: Conteneur pour la modale 1.<div popover id="modale2">: Conteneur pour la modale 2.
Étape 2 : Styles CSS
Ensuite, nous allons styliser nos modales en utilisant CSS. Nous allons utiliser des sélecteurs avancés et des variables CSS pour rendre nos modales interactives et réactives.
styles.css
#modale1 {
background-color: #4caf50;
max-width: 80%;
padding: 20px;
&::backdrop {
background-color: rgba(0, 0, 0, 0.7);
}
.btn-close {
color: white;
background: none;
border: none;
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
}
#modale2 {
position: fixed;
top: 0;
left: 0;
height: 100vh;
margin: 0;
width: 250px;
border: none;
transition: 0.3s;
&:popover-open {
@starting-style {
translate: -100% 0;
}
}
&::backdrop {
background-color: rgba(0, 0, 0, 0.7);
}
}Explication du Code CSS
Modale 1 :
background-color: #4caf50;: Définit la couleur de fond de la modale 1.max-width: 80%;: Définit la largeur maximale de la modale 1.padding: 20px;: Ajoute un padding autour du contenu de la modale 1.&::backdrop: Définit le style de l'arrière-plan de la modale 1..btn-close: Stylise le bouton de fermeture de la modale 1.
Modale 2 :
position: fixed;: Positionne la modale 2 de manière fixe.top: 0;: Positionne la modale 2 en haut de la page.left: 0;: Positionne la modale 2 à gauche de la page.height: 100vh;: Définit la hauteur de la modale 2 à 100% de la hauteur de la fenêtre.margin: 0;: Supprime les marges autour de la modale 2.width: 250px;: Définit la largeur de la modale 2.border: none;: Supprime les bordures autour de la modale 2.transition: 0.3s;: Ajoute une transition pour les animations.&:popover-open: Définit le style lorsque la modale 2 est ouverte.@starting-style: Définit le style de départ pour l'animation.&::backdrop: Définit le style de l'arrière-plan de la modale 2.
Conclusion
Vous avez maintenant deux modales interactives et réactives en utilisant uniquement HTML et CSS. Vous pouvez personnaliser davantage les styles et ajouter plus de contenu selon vos besoins. Ce tutoriel vous a guidé à travers chaque étape, en expliquant les détails de chaque partie du code. N'hésitez pas à expérimenter avec différentes styles et contenus pour créer des modales uniques et attrayantes.
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.
