Réalisé par Rabelais Kpechekou
TP sur les fenêtres modales :
I - Objectifs du TP
II - Structure HTML de l’interface à reproduire.
III - Code CSS pour réussir le projet.
IV – Code JavaScript pour dynamiser le projet.
1
Réalisé par Rabelais Kpechekou
I - Objectifs du TP :
Ce TP a été fait dans le cadre de la formation front end pour la IG 1 dans le cadre de
jauger le niveau de chaque étudiant. Il vise à permettre aux étudiants de revisiter différentes
propriétés primordiales en CSS pour les mises en forme basique. Et ce TP est aussi fait pour
servir dans la conception d’une fenêtre modale qu’on peut fermer en JS.
II – Structure HTML de l’interface à reproduire :
Pour commencer, nous devons connaître l’interface à reproduire. Et cette interface se
trouve ci-dessous :
Nous avons en premier ceci :
Lorsqu’on clique sur le bouton Ouvrir le block, la fenêtre modale suivante apparaît.
2
Réalisé par Rabelais Kpechekou
Il s’agit dans cette photo d’une page web dans laquelle nous voyons dans un block avec
un fond blanc, un titre en gras avec l’inscription : « Bienvenu chez Rayton Tech ». Puis, nous
voyons un paragraphe de texte. Et enfin, nous avons un bouton d’une couleur assez jolie. Et
derrière tout cela, nous identifions un fond noir transparent.
Nous, ce qui nous intéresse ici, c’est la structure HTML à mettre en place pour obtenir ce
qu’il faut. Car, notons que le HTML est utilisé pour la structuration de la page et le CSS est
utilisé pour la mise en forme de la page. Le Javascript sera utilisé pour la dynamisation avec les
animations.
Alors, revenons sur ce qui nous intéresse : la structure HTML.
Nous voyions d’abord un bouton avec le contenu « Ouvrir un block ». Vu qu’il est seul sur la page
dans un premier temps, nous allons le centrer comme dans la photo sur la page. Nous n’utiliserons
pas de balise button ici. Nous prendrons une div que nous allons styliser.
Nous pourrons penser à avoir cette structure dans notre body :
<!-- Cette structure permet d'avoir le bouton avec le div ayant la classe bouton
et de simuler la page avec le div ayant la classe bouton-container. -->
<div class="bouton-container">
<div class="bouton">
Ouvrir un block
</div>
</div>
3
Réalisé par Rabelais Kpechekou
Nous aurons aussi besoin d’une autre balise div pour contenir la fenêtre modale. Vu qu’à un
moment donné, la fenêtre modale doit prendre toute la page, nous devrons avoir deux balises
parents.
<div class="block-container">
<div class="block">
<!—- Contenu de la fenêtre modale -->
</div>
</div>
A l’intérieur de ces balises, nous devrons y mettre différents contenus.
Nous parlions tout à l’heure d’un texte en gras que nous avions vu. Vous savez déjà de quel balise
HTML, nous voulons parler : il s’agit de la balise h1. C’est cette balise qui a permis de mettre le
texte « Bienvenu chez Rayton Tech » en gras avec cette écriture.
<h1> Bienvenu chez Rayton Tech </h1>
Ensuite, nous avions eu à parler d’un paragraphe que nous avions remarqué. Alors, nous
nous souvenons automatiquement d’une balise HTML. J’imagine que vous devinez déjà : la balise
p.
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel natus
error sequi illo alias vitae in culpa minima earum assumenda. Distinctio, nemo eum
sapiente molestiae consequatur quod magni vitae itaque.
Sint architecto blanditiis porro esse quam. Unde earum dolorum quae
amet at corporis ex corrupti voluptas expedita? Sint molestiae enim, perferendis
qui suscipit exercitationem beatae fuga ut, libero inventore accusamus.
Accusamus sint illo ex, eius repellat, ab culpa corrupti labore laborum
eos harum nostrum ad consequuntur libero possimus temporibus quis veritatis aut
iure assumenda excepturi saepe adipisci. Quas, facilis accusamus!
Nam consectetur laboriosam autem! Vel aliquam non molestiae inventore
exercitationem quas soluta at possimus fuga consequuntur, culpa mollitia similique
rem a repellendus alias omnis recusandae explicabo. Iure quaerat voluptas delectus!
Explicabo amet asperiores quaerat sint quisquam totam neque sit
voluptate incidunt ipsum eligendi, tenetur nihil doloremque tempore dicta esse
praesentium unde ipsam repudiandae possimus iure et vitae pariatur laborum!
Dignissimos.
Sunt reiciendis ut qui dolorum labore adipisci explicabo deleniti
inventore placeat voluptate, nisi ad tempora nobis quo eaque consequatur at
temporibus eligendi culpa minima aut? Deleniti, eius. Autem, dolores
expedita?
</p>
4
Réalisé par Rabelais Kpechekou
Enfin, il y avait aussi deux boutons avec les écrits ; « Fermer » et « Créer une ombre ». Si
je vous demandais la balise à utiliser, vous saurez automatiquement quoi me répondre. Je devine
un instant : vous me répondrez la balise button. Et je dirai alors oui. ¨Puis, non ! La balise button
peut permettre de faire les boutons. Mais, nous allons préférer l’utilisation d’une balise div ici.
Cette balise nous permettra de voir certaines configurations essentielles.
<div>Fermer</div>
<div>Créer une ombre</div>
Donc, pour les mises en forme soient correctement assis, nous allons penser à mettre le
titre, le paragraphe et nos deux boutons dans une balise universelle div.
En termes de structure HTML, nous avons en global :
<div class="block-container">
<div class="block">
<h1> Bienvenu chez Rayton Tech </h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel natus
error sequi illo alias vitae in culpa
minima earum assumenda. Distinctio, nemo eum sapiente molestiae
consequatur quod magni vitae itaque.
Sint architecto blanditiis porro esse quam. Unde earum dolorum quae
amet at corporis ex corrupti
voluptas expedita? Sint molestiae enim, perferendis qui suscipit
exercitationem beatae fuga ut, libero
inventore accusamus.
Accusamus sint illo ex, eius repellat, ab culpa corrupti labore laborum
eos harum nostrum ad
consequuntur libero possimus temporibus quis veritatis aut iure
assumenda excepturi saepe adipisci.
Quas, facilis accusamus!
Nam consectetur laboriosam autem! Vel aliquam non molestiae inventore
exercitationem quas soluta at
possimus fuga consequuntur, culpa mollitia similique rem a repellendus
alias omnis recusandae explicabo.
Iure quaerat voluptas delectus!
Explicabo amet asperiores quaerat sint quisquam totam neque sit
voluptate incidunt ipsum eligendi,
tenetur nihil doloremque tempore dicta esse praesentium unde ipsam
repudiandae possimus iure et vitae
pariatur laborum! Dignissimos.
Sunt reiciendis ut qui dolorum labore adipisci explicabo deleniti
inventore placeat voluptate, nisi ad
5
Réalisé par Rabelais Kpechekou
tempora nobis quo eaque consequatur at temporibus eligendi culpa minima
aut? Deleniti, eius. Autem,
dolores expedita?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
dolore quisquam, quam nesciunt error
tempore aliquid, delectus, in aliquam minus repellat rem quidem sit
quae neque facilis nam dolorem
debitis?
</p>
<div class="fermer">Fermer</div>
</div>
</div>
Vous auriez constaté ! On a eu à faire usage des class. Nous avons dans notre code HTML qui se
trouve dans le body, cinq classes : .bouton-container, .bouton, .block-container, .block, .fermer.
Nous devrons donc coder ces classes en CSS.
III - Code CSS pour réussir le projet :
Vu que nous avons déjà établie une struture HTML de base, nous allons nous baser sur cela
pour apporter des mises en forme. Pour l’instant, notre page ressemble à ceci.
Souvent en CSS, la première mise en forme à faire, c’est celui concernant l’ensemble du texte.
Nous devons nous assurer que la marge entre la balise HTML et la balise body n’apparaît plus.
De ce plus, on va remettre la marge intérieure et la marge extérieure à 0 pour l’ensemble du texte.
6
Réalisé par Rabelais Kpechekou
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
Pour la marge intérieure, on a utilisé la propriété padding et la propriété margin pour la marge
extérieure. Nous voyons une autre propriété box-sizing : border-box. Pour apporter une
explication à cette propriété et à sa valeur, on peut dire que la propriété permet de délimiter un
conteneur et d’œuvrer pour qu’en cas de déborderment, ces fils ne le dépassent pas. D’où box-
sizing : border-box.
Aussi, nous voyons la propriété font-family. Comme son nom l’indique, cette propriété permet de
changer la police de leur candidat. Ici, nous avons choisi une liste de police dont la première est
la police ‘Gill Sans’.
La seconde action à réaliser en CSS sera de travailler sur le bouton.
Nous allons étendre la hauteur du conteneur du bouton à celui de la page et centrer le bouton sur
la page avec les propriétés-ci.
.bouton-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Ensuite, nous allons mettre en forme le bouton.
.bouton {
border: 1px solid rgba(0,0,0,.2);
background-color: #45b8d4;
color: white;
padding: 10px 20px;
text-transform: uppercase;
border-radius: 4px;
cursor: pointer;
}
Le bouton est normalement bien positionné maintenant. Passons maintenant à la fenêtre modale.
7
Réalisé par Rabelais Kpechekou
Le bloc du modal aura presque les propriétés du block du bouton suivi d’autres.
.block-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.7);
Le bloc qui contient cependant les éléments du modal seront ainsi stylisés.
.block {
background-color: white;
margin: 60px 100px;
padding: 60px 40px;
border-radius: 10px;
}
Pour l’instant, nous avons ce rendu pour le bloc :
8
Réalisé par Rabelais Kpechekou
Cela montre déjà combien notre page à évoluer. Vous allez constater qu’actuellement le modal
seul prend toute la page et que le bouton « Ouvrir le block » a disparu. Cela parce qu’on a utilisé
la propriété position avec la valeur absolue, suivi de top, bottom, left, right mis à 0 et de width et
heigth à 100%. Ces propriétés font chevaucher la fenêtre modale sur la page.
Il nous faut à présent styliser le bouton Fermer qui est pour l’instant encore comme du texte et
donner une marge du haut h1.
Code CSS :
.fermer {
border-radius: 4px;
border: 1px solid #888;
text-align: center;
margin: 20px;
padding: 10px 0;
cursor: pointer;
background-color: thistle;
}
h1 {
margin-bottom: 10px;
}
Alors, on applique cette mise en forme à notre bouton qui a la class .fermer. Ce qui va changer le
rendu. Et on aura la mise en forme finale souhaitée.
NB : La propriété cursor est une propriété qui permet de spécifier le type de souris qu’on veut. Et
quand attribue la valeur pointer à cette propriété pour que notre balise div réagisse comme un
bouton, c’est-à-dire qu’une main apparaissent lorsqu’on pose la souris sur le bouton.
9
Réalisé par Rabelais Kpechekou
Notre interface est près à présent. La logique veut qu’on utilise le Js pour soit afficher le modal
ou le cacher. De ce fait, on va mettre le div .block-container en display : none ; dans le css.
IV - Code JavaScript pour dynamiser le projet.
Voici le code Javascript pour que lorsqu’on clique sur le bouton ayant la classe .bouton la fenêtre
modale s’ouvre et se ferme lorsqu’on clique sur le bouton ayant la classe .fermer.
// Gestion des boutons
var bouton = document.querySelector('.bouton');
var fermer = document.querySelector('.fermer');
var container = document.querySelector('.block-container');
// une manière d'indiquer l'évènement du click
bouton.onclick = function () {
container.style.display = 'flex';
}
fermer.onclick = () => {
container.style.display = 'none';
}
RECAPITULATIF DU CODE HTML, CSS ET JS DU TP :
<!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">
<title> Essai Animation </title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-
serif;
}
10
Réalisé par Rabelais Kpechekou
.bouton-container, .block-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.bouton {
border: 1px solid rgba(0,0,0,.2);
background-color: #45b8d4;
color: white;
padding: 10px 20px;
text-transform: uppercase;
border-radius: 4px;
cursor: pointer;
}
.block-container {
/* Nous venons de cacher le block */
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.7);
}
h1 {
margin-bottom: 10px;
}
.block {
background-color: white;
margin: 60px 100px;
padding: 60px 40px;
border-radius: 10px;
}
.fermer {
border-radius: 4px;
border: 1px solid #888;
text-align: center;
11
Réalisé par Rabelais Kpechekou
margin: 20px;
padding: 10px 0;
cursor: pointer;
background-color: thistle;
}
</style>
</head>
<body>
<!-- Cette structure permet d'avoir le bouton avec le div ayant la classe
bouton et de simuler la page avec le div ayant la classe bouton-container. -->
<div class="bouton-container">
<div class="bouton">
Ouvrir un block
</div>
</div>
<div class="block-container">
<div class="block">
<h1> Bienvenu chez Rayton Tech </h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel natus
error sequi illo alias vitae in culpa
minima earum assumenda. Distinctio, nemo eum sapiente molestiae
consequatur quod magni vitae itaque.
Sint architecto blanditiis porro esse quam. Unde earum dolorum
quae amet at corporis ex corrupti
voluptas expedita? Sint molestiae enim, perferendis qui suscipit
exercitationem beatae fuga ut, libero
inventore accusamus.
Accusamus sint illo ex, eius repellat, ab culpa corrupti labore
laborum eos harum nostrum ad
consequuntur libero possimus temporibus quis veritatis aut iure
assumenda excepturi saepe adipisci.
Quas, facilis accusamus!
Nam consectetur laboriosam autem! Vel aliquam non molestiae
inventore exercitationem quas soluta at
possimus fuga consequuntur, culpa mollitia similique rem a
repellendus alias omnis recusandae explicabo.
Iure quaerat voluptas delectus!
Explicabo amet asperiores quaerat sint quisquam totam neque sit
voluptate incidunt ipsum eligendi,
tenetur nihil doloremque tempore dicta esse praesentium unde ipsam
repudiandae possimus iure et vitae
pariatur laborum! Dignissimos.
12
Réalisé par Rabelais Kpechekou
Sunt reiciendis ut qui dolorum labore adipisci explicabo deleniti
inventore placeat voluptate, nisi ad
tempora nobis quo eaque consequatur at temporibus eligendi culpa
minima aut? Deleniti, eius. Autem,
dolores expedita?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
dolore quisquam, quam nesciunt error
tempore aliquid, delectus, in aliquam minus repellat rem quidem
sit quae neque facilis nam dolorem
debitis?
</p>
<div class="fermer">Fermer</div>
</div>
</div>
<script>
// Gestion des boutons
var bouton = document.querySelector('.bouton');
var fermer = document.querySelector('.fermer');
var container = document.querySelector('.block-container');
// une manière d'indiquer l'évènement du click
bouton.onclick = function () {
container.style.display = 'flex';
}
fermer.onclick = () => {
container.style.display = 'none';
}
</script>
</body>
</html>
FIN
13
