Des fenêtres contextuelles bien conçues rendent votre site web plus interactif et plus moderne. Elles peuvent créer des marchés et stimuler les ventes des entreprises.
Vous pouvez créer des fenêtres contextuelles avec HTML, CSS et JavaScript. Utilisez le guide suivant pour créer et styliser une fenêtre contextuelle à partir de zéro. Elle rend votre site web interactif et crée de bonnes expériences pour les utilisateurs.
Ecrire du HTML pour structurer le contenu
Écrivons un code HTML qui contient une fenêtre modale cachée qui s’ouvre lorsque vous cliquez sur un bouton. Dans ce cas, vous afficherez la signification du mot Bonjour ! La fenêtre contextuelle comportera un titre et du contenu.
Dès que vous déclenchez la fenêtre modale, un effet de flou est appliqué à l’arrière-plan. Ajoutez des classes aux sections que vous utiliserez pour sélectionner la fenêtre modale ultérieurement en JavaScript.
<body>
<button class="open-modal">Hello!</button>
<div class="modal-content hidden-modal">
<div class="modal-header">
<h3>Meaning of Hello!</h3>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<p>Hello is a greeting in the English language. It is used at
the start of a sentence as an introduction whether in person or
on the phone.</p>
</div>
</div>
<div class="blur-bg hidden-blur"></div>
<script src="script.js"></script>
</body>
La page devrait se présenter comme suit :
Vous pouvez également étudier l’élément de dialogue HTML si vous souhaitez utiliser le balisage le plus sémantique.
Écrire du CSS pour ajouter du style
Utilisez les feuilles de style CSS pour mettre en forme la fenêtre contextuelle. Placez la fenêtre au centre de la page web sur un fond noir, afin qu’elle soit clairement visible. Vous allez également styliser la fenêtre, son arrière-plan et la taille de la police.
Tout d’abord, créez un style uniforme pour l’ensemble de la page en définissant la marge, l’espacement et l’épaisseur des lignes. Alignez ensuite les éléments du corps au centre sur un arrière-plan.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1;
}
body {
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: #000;
gap: 30px;
}
Ensuite, donnez un style à l’élément open-modal bouton. Donnez-lui une couleur d’arrière-plan différente de celle du reste de la page pour qu’il ressorte bien. Définissez également la couleur, la taille et le remplissage de la police, ainsi qu’une durée de transition.
.open-modal {
background: #20c997;
color: #fff;
border: none;
padding: 20px 40px;
font-size: 48px;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.open-modal:active {
transform: translateY(-17px);
}
Ensuite, stylisez le contenu modal qui s’affichera lorsque la fenêtre s’ouvrira. Définissez un arrière-plan blanc, donnez-lui une largeur inférieure à celle du corps et ajoutez du rembourrage.
Donnez-lui également un z-index, afin qu’il apparaisse avant le corps de la fenêtre. open-modal . En outre, le bouton caché-modal s’affiche comme aucun, il reste donc caché jusqu’à ce que vous le déclenchiez.
.modal-content {
background: #ccc;
width: 500px;
padding: 20px;
border-radius: 10px;
z-index: 99;
}
.modal-header {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
color: #000;
font-size: 30px;
}
.modal-body p {
font-size: 22px;
line-height: 1.5;
}
.hidden-modal {
display: none;
}
Ensuite, stylisez l’élément close-modal avec un fond transparent et l’aligner au centre.
.close-modal {
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
font-size: 40px;
}
.close-modal:hover {
color: #fa5252;
}
Enfin, donnez un style à l’élément flou qui sera projeté sur l’arrière-plan lorsque la fenêtre s’ouvrira. Il aura une hauteur et une largeur maximales et un filtre d’arrière-plan. Définissez l’élément de flou comme étant nul, afin qu’il ne soit pas visible avant l’ouverture de la fenêtre.
.blur-bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
}
.hidden-blur {
display: none;
}
Après avoir ajouté le CSS, la page devrait ressembler à ceci :
Contrôler la fenêtre popup avec du code JavaScript
Vous utiliserez JavaScript pour ouvrir et fermer la fenêtre modale en l’affichant ou en la masquant. Ajoutez des récepteurs d’événements au bouton pour déclencher son ouverture et sa fermeture lorsque vous cliquez dessus.
Sélectionnez d’abord les éléments pertinents à l’aide des classes CSS que vous avez définies dans le code HTML :
let modalContent = document.querySelector(".modal-content");
let openModal = document.querySelector(".open-modal");
let closeModal = document.querySelector(".close-modal");
let blurBg = document.querySelector(".blur-bg");
Ajoutez un écouteur d’événement à l’élément open-modal afin qu’il ouvre la fenêtre lorsque vous cliquez dessus.
openModal.addEventListener("click", function () {
modalContent.classList.remove("hidden-modal");
blurBg.classList.remove("hidden-blur");
});
Effectuez les actions inverses pour gérer la fermeture de la fenêtre contextuelle mais, cette fois, intégrez-les dans une fonction nommée. Cela permettra de gérer le comportement de plusieurs événements susceptibles de provoquer la fermeture de la fenêtre modale :
let closeModalFunction = function () {
modalContent.classList.add("hidden-modal")
blurBg.classList.add("hidden-blur")
}
Ajouter des récepteurs d’événements pour gérer les clics sur le bouton d’arrière-plan ou de fermeture, et le cas où l’utilisateur appuie sur la touche Echap.
blurBg.addEventListener("click", closeModalFunction);
closeModal.addEventListener("click", closeModalFunction);
document.addEventListener("keydown", function (event) {
if (event.key === "Escape"
&& !modalContent.classList.contains("hidden")
) {
closeModalFunction();
}
});
Maintenant, lorsque vous cliquez sur le bouton Bonjour ! la fenêtre modale apparaît. Vous pouvez la fermer en cliquant sur le bouton d’annulation à droite de la fenêtre. Consultez le code sur codepen.io et interagissez avec la fenêtre modale :
Utilisations des fenêtres pop-up
La principale utilisation des fenêtres contextuelles/modales dans le développement web est d’attirer l’attention sur un élément particulier du site web. Une fois déclenchées, elles désactivent le reste de la page, incitant l’utilisateur à y prêter attention.
Les fenêtres contextuelles animent votre interface utilisateur. Elles peuvent alerter l’utilisateur et attirer son attention sur des informations importantes de la page web. Pour faire disparaître la fenêtre, l’utilisateur doit effectuer une action. Ainsi, l’utilisateur peut interagir avec la fenêtre et obtenir l’information souhaitée.