Créer une fenêtre contextuelle à l'aide de HTML, CSS et JavaScript

Des fenêtres contextuelles bien conçues rendent votre site Web plus interactif et moderne. Ils 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. Il rend votre site Web interactif et crée d'excellentes expériences utilisateur.

Écrire du HTML pour structurer le contenu

Écrivons du code HTML qui a une fenêtre modale cachée qui apparaît lorsque vous cliquez sur un bouton. Dans ce cas, vous afficherez la signification du mot Bonjour! La fenêtre contextuelle aura un titre et du contenu.

Dès que vous déclenchez la fenêtre modale, un effet flou est projeté sur l'arrière-plan. Ajoutez des classes aux sections que vous utiliserez pour sélectionner le modal plus tard dans JavaScript.

<corps>
<boutonclasse="ouvert-modal">Bonjour!bouton>
<divclasse="contenu modal caché-modal">
<divclasse="en-tête modal">
<h3>Signification de Bonjour !h3>
<boutonclasse="proche-modal">×bouton>
div>
<divclasse="corps modal">
<p>Hello est une salutation en anglais. Il est utilisé à
 le début d'une phrase en guise d'introduction, que ce soit en personne ou
 au téléphone.p>
div>
div>
<divclasse="flou-bg caché-flou">div>
<scénariosrc="script.js">scénario>
corps>

La page devrait apparaître ainsi :

Vous pouvez également vouloir enquêter sur le élément de dialogue HTML si vous cherchez à utiliser le balisage le plus sémantique.

Écrire CSS pour ajouter du style

Utilisez CSS pour formater 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 toute la page en définissant la marge, le remplissage et la hauteur de ligne. Alignez ensuite les éléments du corps au centre sur un arrière-plan.

* {
marge: 0;
rembourrage: 0;
dimensionnement de la boîte: border-box;
hauteur de la ligne: 1;
}
corps {
hauteur: 100%;
afficher: fléchir;
justifier-contenu: centre;
flex-direction: colonne;
aligner les éléments: centre;
arrière-plan: #000;
écart: 30pixels;
}

Ensuite, coiffez le open-modal bouton. Donnez-lui une couleur de fond différente du reste de la page afin qu'elle se démarque. Définissez également sa couleur de police, sa taille, son rembourrage et un temps de transition.

.open-modal {
arrière-plan: #20c997;
couleur: #fff;
frontière: aucun;
rembourrage: 20pixels 40pixels;
taille de police: 48pixels;
rayon de bordure: 100pixels;
le curseur: aiguille;
transition: tous 0.3s;
contour: aucun;
}
.open-modal:actif {
transformer: traduireY(-17px);
}

Ensuite, stylisez le contenu modal qui s'affichera à l'ouverture de la fenêtre. Définissez un arrière-plan blanc, donnez-lui une largeur inférieure à celle du corps et ajoutez un rembourrage.

Donnez-lui également un z-index, afin qu'il apparaisse devant le open-modal bouton. De plus, réglez le caché-modal afficher comme aucun, il reste donc caché jusqu'à ce que vous le déclenchiez.

.modal-content {
arrière-plan: #ccc;
largeur: 500pixels;
rembourrage: 20pixels;
rayon de bordure: 10pixels;
indice z: 99;
}
.modal-en-tête {
afficher: fléchir;
justifier-contenu: l'espace entre;
marge inférieure: 16pixels;
couleur: #000;
taille de police: 30pixels;
}
.modal-bodyp { 
taille de police: 22pixels;
hauteur de la ligne: 1.5; 
} 
.hidden-modal { 
afficher: aucun; 
}

Coiffez ensuite le proche-modal bouton avec un fond transparent et alignez-le au centre.

.close-modal {
arrière-plan: transparent;
frontière: aucun;
afficher: fléchir;
aligner les éléments: centre;
justifier-contenu: centre;
hauteur: 20pixels;
largeur: 20pixels;
taille de police: 40pixels;
}
.close-modal:flotter {
couleur: #fa5252;
}

Enfin, stylisez l'élément de 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 le flou sur aucun, afin qu'il ne soit pas visible tant que la fenêtre ne s'ouvre pas.

.blur-bg {
position: absolu;
haut: 0;
gauche: 0;
hauteur: 100%;
largeur: 100%;
arrière-plan: RVB(0, 0, 0, 0.3);
filtre de toile de fond: se brouiller(5pixels);
}
.caché-flou {
afficher: aucun;
}

Après avoir ajouté le CSS, la page devrait ressembler à ceci :

Contrôlez la fenêtre contextuelle avec du code JavaScript

Vous utiliserez JavaScript pour ouvrir et fermer la fenêtre modale en l'affichant ou en la masquant. Ajouter auditeurs 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 HTML :

laisser Contenu modal = document.querySelector(".modal-contenu");
laisser openModal = document.querySelector(".open-modal");
laisser closeModal = document.querySelector(".close-modal");
laisser blurBg = document.querySelector(".blur-bg");

Ajouter un écouteur d'événement au open-modal bouton pour qu'il ouvre la fenêtre lorsque vous cliquez dessus.

openModal.addEventListener("Cliquez sur", fonction () {
 modalContent.classList.remove("mode caché");
 blurBg.classList.remove("flou caché");
});

Effectuez les actions opposées pour gérer la fermeture du popup mais, cette fois, encapsulez-les dans une fonction nommée. Cela gérera le comportement de plusieurs événements pouvant entraîner la fermeture de la fenêtre modale :

laisser closeModalFunction = fonction () {
 modalContent.classList.add("mode caché")
 blurBg.classList.add("flou caché")
}

Ajoutez des écouteurs d'événement pour gérer les clics sur l'arrière-plan ou le bouton de fermeture, et le cas où l'utilisateur appuie sur la touche Échap.

blurBg.addEventListener("Cliquez sur", closeModalFunction);
closeModal.addEventListener("Cliquez sur", closeModalFunction);
document.addEventListener("touche Bas", fonction (événement) {
si (événement.clé "S'échapper"
 && !modalContent.classList.contains("caché")
 ) {
 closeModalFunction();
 }
});

Maintenant, lorsque vous cliquez sur le Bonjour! bouton, le modal apparaît. Vous pouvez la fermer en cliquant sur le bouton Annuler à droite de la fenêtre. Voir le code sur codepen.io et interagir avec le modal :

Utilisations des fenêtres contextuelles

L'utilisation principale des fenêtres contextuelles/modales dans le développement Web est de mettre l'accent sur un élément particulier du site Web. Une fois déclenché, il désactive le reste de la page invitant l'utilisateur à y prêter attention.

Les fenêtres contextuelles animent votre interface utilisateur. Ils peuvent alerter et attirer l'attention sur des informations importantes sur la page Web pour vos utilisateurs. Pour supprimer la fenêtre, l'utilisateur doit effectuer une action. De cette façon, l'utilisateur peut interagir avec la fenêtre et obtenir les informations souhaitées.