Home-theater-designers
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.
UTILISEZ LA VIDÉO DU JOUR FAITES DÉFILER POUR CONTINUER AVEC LE CONTENU
É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.
comment utiliser l'iphone comme webcam avec usb
<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 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.
* {
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, 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 {
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 à 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.
disque dur externe windows ne s'affiche pas
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 {
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;
}
Coiffez ensuite le proche-modal bouton avec un fond transparent et alignez-le 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, 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: 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ô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.
mon disque dur externe ne fonctionne pas
Sélectionnez d'abord les éléments pertinents à l'aide des classes CSS que vous avez définies dans le 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");
Ajouter un écouteur d'événement au open-modal bouton pour 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 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 :
let closeModalFunction = function () {
modalContent.classList.add("hidden-modal")
blurBg.classList.add("hidden-blur")
}
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("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 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.