Récemment, j’ai fait le saut de la création d’applications Ruby fullstack au travail avec Javascript. Comme vous le savez peut-être déjà, Javascript permet aux utilisateurs, ou aux clients, d’interagir avec une page Web et de rendre dynamiquement du nouveau contenu au DOM en fonction de l’interactivité de l’utilisateur. Par rapport au codage en Ruby on Rails (dans lequel chaque rerender nécessite une actualisation complète de la page), la possibilité de rerender divers éléments de page en fonction des interactions des utilisateurs avec Javascript a amené mes compétences de développement frontend de 1994 à aujourd’hui. Avec ma compréhension rudimentaire de Javascript, je peux maintenant créer un élément web interactif que j’avais hâte d’implémenter dans mes projets: des boîtes de messages — ou des popups.

Un modal, ou boîte de dialogue, est une boîte de message qui apparaît dans le navigateur après une certaine interactivité utilisateur spécifiée. Avant de nous plonger dans les spécificités de la création d’une boîte modale pour votre site avec HTML, CSS et Javascript, passons d’abord en revue les différents types de boîtes de messages que vous pouvez rencontrer.

Alertes

Une alerte est une boîte de message, généralement verrouillée dans le navigateur, qui nécessite une réponse ou une interaction de l’utilisateur avant de pouvoir être rejetée et disparaît de la page. Peut-être souhaitez-vous que le client accuse réception des informations (Conditions d’utilisation) ou que la page elle-même confirme l’achèvement d’un formulaire. Cependant, tant que l’alerte n’est pas levée, le client ne peut pas interagir avec le reste de la page.

Popup

Une fenêtre contextuelle est une boîte de message collante (pensez à « coller » à la page, pas collante comme des bonbons) qui apparaît dans le navigateur et qui ne nécessite pas d’interaction ou d’attention immédiate. Si un utilisateur souhaite qu’il disparaisse, il devra fermer ou interagir avec la fenêtre contextuelle à ce moment-là, mais l’interactivité du reste de la page est toujours fonctionnelle. Les notifications sont un exemple de fenêtre contextuelle.

Growl Notification/Flash Notice

A growl notification is a popup that dismisses itself after an associated period of time. These are sometimes also referred to as flash notices. L’utilisateur peut interagir avec la notification de grognement – peut-être pour fermer la boîte de message tôt, ou pour cliquer sur un bouton dans la notification — ou peut choisir d’ignorer et il disparaîtra après l’expiration du minuteur. Comme une fenêtre contextuelle, la notification de grognement permet au client de continuer à interagir avec le reste de la page. Un exemple de ceci est une notification par e-mail ou sur les réseaux sociaux.

Lightbox/Theatre

Une lightbox ou une salle de cinéma est une boîte de message qui agrandit généralement le contenu déjà disponible dans le navigateur pour permettre à un utilisateur de se concentrer dessus. Un cas d’utilisation courant est une image ou une série d’images affichées dans une galerie. Lorsqu’une lightbox ou une salle de cinéma est utilisée avec plusieurs éléments de contenu, elle est considérée comme « verrouillée » lorsqu’un utilisateur peut naviguer dans le contenu associé dans la lightbox elle-même, au lieu de revenir à la page d’origine et de cliquer ensuite sur l’image suivante de la série pour l’agrandir.

Popover/Hovercard

L’une des boîtes de message les plus petites, un popover ou une hovercard n’apparaît à l’écran que lorsqu’un utilisateur passe sa souris sur une zone sélectionnée. Ces boîtes de messages peuvent contenir des instructions ou des explications concernant le bouton ou le conteneur que l’utilisateur survole actuellement; ils peuvent également contenir un aperçu des informations disponibles si l’utilisateur clique sur un lien.

Modal/Boîte de dialogue

Enfin, une boîte de dialogue ou modale est une boîte de message qui permet une interactivité supplémentaire de la page sans s’éloigner du contenu actuel dans le navigateur. Une boîte modale n’est pas verrouillée à l’écran (i.e., le client peut s’en éloigner sans interaction requise), bien que ce soit généralement l’objectif de l’utilisateur (en fonction de votre style de la boîte). Dans la plupart des cas, si un utilisateur souhaite ignorer le modal, il peut simplement fermer la boîte avec un bouton fourni ou cliquer en dehors du modal. Un exemple de modal est lorsqu’un utilisateur doit remplir un formulaire ou fournir des informations spécifiques pour une requête de recherche, mais que vous ne souhaitez pas qu’il accède à une autre page.

Implémentation d’un Modal

Afin de créer et d’implémenter un modal sur votre page, vous devez effectuer trois étapes pour la fonctionnalité :

1. HTML:balisage pour créer l’élément modal
2. CSS: style pour déterminer l’apparence et l’apparence de votre modal sur la page
3. Javascript: placer les écouteurs d’événements de sorte que le modal apparaisse / disparaisse en fonction de l’interactivité de votre utilisateur

HTML

Pour les modaux les plus simples, nous avons besoin d’un bouton (ou de l’élément de page que vous préférez) sur lequel un utilisateur peut cliquer pour activer le modal, le modal réel, et vous voudrez probablement implémenter un bouton de fermeture dans le modal.

<button> click me, I make a modal</button><div class="modal">
<div class="modal-content">
<span class="close-btn">&times;</span>
<p>this is the text inside the modal</p>
</div>
</div>

Dans ce qui précède, vous pouvez voir que nous avons un bouton qui apparaîtra dans notre HTML, ainsi qu’un modal, avec trois classes CSS: modalmodal-btn, et close-btn. Chacun de ces éléments sera inclus dans le CSS ci-dessous. Le premier div est le conteneur parent qui contient tout le modal avec une classe de modal. En interne, nous avons un div qui contient le contenu du modal lui-même: le bouton pour fermer le modal dans la balise span et le texte dans une balise p.

En aparté rapide, vous pouvez également implémenter des en-têtes et des pieds de page dans votre modal en créant simplement plus de div dans les classes HTML et d’autres classes CSS à des fins de style. Exemple:

<div class="modal">
<div class="modal-header">
<span class="close-btn">&times;</span>
<h1>I am the Header</h1>
</div>
<div class="modal-content">
<p>this is the text inside the modal</p>
</div>
<div class="modal-footer">
<h2>I am the Footer</h2>
</div>
</div>

CSS

Pour styliser chacun des éléments dans le HTML de notre modal simple, nous devons créer les classes CSS associées : .modal.modal-content, et .close-btn. De plus, vous pouvez voir ci-dessous qu’il y a aussi CSS inclus pour créer une animation pour le modal.

.modal {
display: none;
position: fixed; 
padding-top: 50px;
left: 0; 
top: 0;
width: 100%;
height: 100%; 
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}.modal-content {
position: relative; 
background-color: white;
padding: 20px; 
margin: auto; 
width: 75%; 
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}.close-btn {
float: right; 
color: lightgray; 
font-size: 24px; 
font-weight: bold;
}.close-btn:hover {
color: darkgray;
}@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

Dans les classes ci-dessus, nous avons un style pour chacun des éléments que nous avons créés dans notre code HTML.

La classe .modal elle-même a des attributs qui déterminent comment elle traite la page derrière le modal lui-même: une largeur et une hauteur par rapport à la page derrière la boîte de dialogue, une couleur (cet exemple utilise un gris semi-opaque) et un paramètre de visibilité afin que nous puissions le basculer dans notre Javascript lorsqu’un utilisateur clique sur le bouton.

Pour la boîte de dialogue réelle, nous avons également un style séparé dans .modal-content: le positionner par rapport au style d’arrière-plan, une couleur d’arrière-plan pour la boîte de dialogue elle-même, un rembourrage, et dans cet exemple, une animation est incluse pour que le modal descende du haut de la page.

De plus, nous avons stylisé une classe .close-btn qui flotte un ‘x’ à droite, et avec .close-btn:hover, lorsque l’utilisateur survole le bouton de fermeture, la couleur change. Pour plus de clarté, l’utilisateur peut cliquer en dehors du modal pour fermer la boîte de dialogue de la même manière que cliquer sur le bouton fermer. Nous allons créer un écouteur d’événements pour les deux options dans notre Javascript.

Cela gratte à peine la surface du CSS que vous pourriez implémenter vous-même. N’hésitez pas à ajuster le code ci-dessus pour mieux répondre à vos propres besoins.

Javascript

Enfin, nous devons écrire du Javascript afin de créer la fonctionnalité du modal.

let modalBtn = document.getElementById("modal-btn")let modal = document.querySelector(".modal")let closeBtn = document.querySelector(".close-btn")modalBtn.onclick = function(){
modal.style.display = "block"
}closeBtn.onclick = function(){
modal.style.display = "none"
}window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}

Nous avons sélectionné plusieurs objets de notre code HTML et les avons assignés à des variables : un modal-btn, le modal lui-même, et le close-btn. Ensuite, nous avons créé des écouteurs d’événements pour les événements onclick. Lorsqu’un utilisateur clique sur le modal-btn, le style d’affichage est défini sur "block”, mais lorsqu’il clique sur le close-btn ou sur la fenêtre en dehors du modal (représentée dans notre style par le gris semi-opaque), le style d’affichage est ensuite défini sur "none". Cela masque efficacement le modal jusqu’à ce qu’ils cliquent à nouveau sur le modal-btn.

Dans l’ensemble, jouer avec le DOM avec Javascript a été incroyablement amusant et gratifiant en tant que codeur débutant. Espérons que le code ci-dessus vous aidera également à implémenter vous-même des modaux et des boîtes de messages. Avec quelques recherches rapides sur Google, vous pouvez également trouver d’autres ressources pour ajuster les modaux et les boîtes de dialogue pour vos cas d’utilisation.

Bonne chance là-bas, et bon codage!