3 minutes
Qu'est-ce Qu'un Modal
Dernière mise à jour: 13 juillet, 2022Créer un modal peut sembler intimidant si vous êtes débutant. Cela implique HTML, CSS et bien sûr JavaScript. Travailler avec tous les aspects du développement web front-end. Vous pouvez éviter d'utiliser un modal mais c'est tout simplement trop utile pour éviter tous ensemble. Les modaux sont parfaits pour montrer des informations à nos visiteurs, envoyer un formulaire rapide ou les alerter de quelque chose, etc. La seule limite est votre imagination. Commençons!
§Commencons Par Une Définition de Base
Un modal est un élément qui apparaît devant le contenu principal que vous avez sur votre page. Cela nécessite une interaction et un engagement de l'utilisateur. C'est un bon moyen de montrer à l'utilisateur ce que vous voulez qu'il voie et d'attirer son attention.
§Utilisations des Modaux
Eh bien, tout d'abord, les modaux sont principalement utilisés pour informer les utilisateurs sur les choses que nous, en tant que développeurs Web, pensons importantes et qui méritent l'attention des utilisateurs. Pour se débarrasser d'un utilisateur modal, il faut interagir avec lui. Cette interaction assure le plus d'attention possible. Vous pouvez également avertir les utilisateurs de les informer de quelque chose qu'ils sont sur le point de faire.
Créer un formulaire dans un modal est possible et même amusant s'il est bien fait. Il permet aux utilisateurs de rester dans la même page et de gérer l'envoi d'un formulaire sans encombrer la page que le visiteur consulte. Vous pouvez gérer les connexions, les contacts d'inscription, etc.
Vous pouvez afficher les médias à votre visiteur sous la forme d'un modal si vous pensez que les médias méritent l'attention. C'est une excellente façon d'attirer l'attention maximale de votre visiteur. Imaginez un texte long et ennuyeux. Si vous deviez diviser ce long texte avec des informations sous forme de média permettant aux visiteurs de digérer le contenu d'une autre manière, vous pouvez être sûr que vous aurez des visiteurs plus heureux qui passeront plus de temps sur vos sites Web.
§Le Fonctionnement d'Un Modal
Le modal apparaît au-dessus du contenu principal, le bloquant et ne permettant pas l'interaction avec le contenu principal. La fermeture des modaux nécessite une action de l'utilisateur. Pour donner l'impression que le contenu autre que le modal est moins important, les modaux assombrissent généralement l'arrière-plan. Cela attire l'attention des utilisateurs sur le modal. J'utilise personnellement les modaux afin d'informer les visiteurs/utilisateurs et de partager certains médias. Je pense que les processus tels que les connexions et les inscriptions méritent leurs propres pages car ils peuvent être très compliqués.
J'ai vu des modaux être utilisés de nombreuses manières différentes et créatives et je suis sûr que si vous réfléchissez un peu après les exemples suivants, vous pouvez penser à certaines façons d'utiliser les modaux dans vos projets.
§Création de Deux Modaux de Base
Nous allons créer deux exemples modaux très basiques. Grâce à ces exemples, vous comprendrez mieux le fonctionnement de l'élément modal. Commençons!
Dans mes exemples, mes divs pour les modaux existent déjà dans mon fichier HTML. Ils sont derrière le contenu principal et invisibles. J'ai également ajouté deux boutons sur ma page pour les rendre visibles.
Notre css est également très simple. Nos modaux vont avoir des valeurs "position : absolute" car nous voulons qu'ils couvrent toute la page. Nous allons créer deux divs principaux pour chaque modal. L'une de ces div couvrira toute la page et l'autre sera placée au milieu et contiendra notre contenu principal.
Dans notre fichier js, tout ce que nous devons faire est de gérer les modifications nécessaires pour les modaux. Nous allons changer les attributs css des modaux pour les rendre visibles/invisibles.
J'ajouterai des commentaires quand je pense que c'est compliqué. Commençons par le code du fichier index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script defer src="main.js"></script>
<title>Modal</title>
</head>
<body>
<div id="modal-container-one" class="modal">
<div class="modal-text-box">
<p>This is modal one, very basic, very simple.</p>
<button id="modal-one-close-button" class="close-button">Close</button>
</div>
</div>
<div id="modal-container-two" class="modal">
<div class="modal-text-box">
<p>This is modal two. There is a little action going on with the width, nothing too complicated. </p>
<button id="modal-two-close-button" class="close-button">Close</button>
</div>
</div>
<div class="button-container">
<button id="button-one" class="modal-open-button">Open Modal One</button>
<button id="button-two" class="modal-open-button">Open Modal Two</button>
</div>
</body>
</html>
Rien de bien compliqué pour l'instant. Voyons maintenant le code de notre fichier style.css :
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
background: rgb(87,255,244);
background: linear-gradient(153deg, rgba(87,255,244,1) 0%, rgba(103,255,199,1) 63%);
align-items: center;
justify-content: center;
}
.modal {
position: absolute;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.2);
align-items: center;
justify-content: center;
transition: 0.4s;
display: flex;
}
#modal-container-one {
z-index: -1;
opacity: 0;
}
#modal-container-two {
z-index: -1;
opacity: 0;
width: 0px;
}
.modal-text-box {
padding: 50px;
background: rgb(253,90,255);
background: radial-gradient(circle, rgba(253,90,255,1) 0%, rgba(45,249,253,1) 100%);
font-size: 1.4rem;
color: white;
height: 200px;
border-radius: 5px;
display: flex;
flex-direction: column;
}
.close-button {
background-color: red;
border: none;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
color: white;
font-size: 1.4rem;
transition: 0.3s;
}
.close-button:hover {
cursor: pointer;
box-shadow: 0px 0px 12px 2px red;
}
.button-container {
display: flex;
flex-direction: column;
}
.modal-open-button {
padding: 15px 20px;
margin: 10px 0;
border: none;
background-color: violet;
font-size: 1.4rem;
border-radius: 5px;
color: white;
box-shadow: 2px 2px 12px 2px rgb(255, 255, 255);
transition: 0.3s;
}
.modal-open-button:hover {
cursor: pointer;
background-color: rgb(241, 172, 241);
color: rgb(0, 0, 0);
box-shadow: 2px 2px 12px 2px rgb(0, 0, 0);
}
J'ai essayé de ne rien utiliser de compliqué afin de garder ce projet très concis.
// Commençons par sélectionner nos éléments
// Les boutons pour rendre nos modaux visibles
const modalBtnOne = document.querySelector("#button-one")
const modalBtnTwo = document.querySelector("#button-two")
// Divs externes de nos modaux
const modalOne = document.querySelector("#modal-container-one")
const modalTwo = document.querySelector("#modal-container-two")
// Et enfin les boutons pour fermer les modaux
const modalOneCloseButton = document.querySelector("#modal-one-close-button");
const modalTwoCloseButton = document.querySelector("#modal-two-close-button");
let modalOpen = false // On va vérifier s'il y a un modal actif
window.addEventListener('click', (event) => {
// S'il y a un modal ouvert
if(modalOpen) {
// Ok, les deux modaux sont pour la plupart les mêmes
// Modal deux a une animation de croissance supplémentaire
// simple mais à part ça, comme vous pouvez le voir, rien
// d'extraordinaire
if(event.target === modalOneCloseButton) {
modalOpen = false
modalOne.style.zIndex = "-1";
modalOne.style.opacity = "0";
} else if(event.target === modalTwoCloseButton) {
modalOpen = false
modalTwo.style.zIndex = "-1";
modalTwo.style.opacity = "0";
modalTwo.style.width = "0px"
}
} else if(event.target === modalBtnOne) {
// la valeur de z-index pourrait être aussi petite
// que 4 mais j'aime de faire 100 quand ça n'a pas
// vraiment d'importance
modalOpen = true;
modalOne.style.zIndex = "100";
modalOne.style.opacity = "1";
}
else if(event.target === modalBtnTwo) {
modalOpen = true;
modalTwo.style.zIndex = "100"
modalTwo.style.opacity = "1"
// agrandissez-le en taille réelle pour voir
modalTwo.style.width = "100%"
}
})
Nous avons fini. Félicitations, les modaux ne sont pas les éléments les plus faciles à créer et j'espère que vous avez une meilleure compréhension du fonctionnement et des utilisations des modaux. J'espère que vous vous amuserez à parcourir ce post, je l'ai certainement fait en le créant.
Ne vous arrêtez pas là, créez des modaux plus élaborés, incluez-les dans vos projets existants, créez de nouveaux projets pour vos modaux, etc. Continuez à apprendre !
Ilker AkbiyikTable Des Matières
Articles Similaires
