Dans cet article
Vous avez souvent voulu créer une fenêtre modale (une fenêtre qui s'ouvre à l'intérieur de votre site internet) mais vous ne connaissez par JavaScript ? Découvrons ensemble comment réussir à y parvenir !
1ère étape
Débutons par le code HTML.
HTML
<a href="#demo">Ouvrir la modale</a>
<div id="demo" class="modal">
<div class="modal_content">
<h1>Hello</h1>
<p>Bienvenue sur la fenêtre modale !</p>
<a href="#" class="modal_close">×</a>
</div>
</div>L’ancre de notre lien (#demo) fait référence à l’id qui sera sur notre fenêtre modale.
2ème étape
Stylisons le lien.
CSS
a {
text-decoration: none;
padding: 15px;
background-color: white;
border-radius: 5px;
text-transform: uppercase;
color: black;
}
3ème étape
Occupons-nous de la fenête modale.
CSS
.modal {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(77, 77, 77, .7);
transition: all .4s;
}
4ème étape
Détectons le clic !
CSS
.modal:target {
visibility: visible;
opacity: 1;
}C’est grâce à la pseudo-classe target que nous pouvons nous passer de JavaScript !
5ème étape
Stylisons le contenu de la modale pour finir.
CSS
.modal_content {
border-radius: 4px;
position: relative;
width: 500px;
max-width: 90%;
background: white;
padding: 1.5em 2em;
}
.modal_close {
position: absolute;
top: 10px;
right: 10px;
color: grey;
text-decoration: none;
}Catégorie : Développeurs