Modal
Posté : 20 juil. 2020, 21:22
bonjour à tous ,
je suis débutant en JS et je voudrais faire deux modals :
mais bien sûr en évitant la répétition de code
les deux éléments sont sur la même page (deux images , mais n’ouvrent pas le même contenu text)
le deuxième élément HTML n'est pas encore crée
voici mon code :
html :
css:
js :
merci d'avance pour l'aide
je suis débutant en JS et je voudrais faire deux modals :
mais bien sûr en évitant la répétition de code
les deux éléments sont sur la même page (deux images , mais n’ouvrent pas le même contenu text)
le deuxième élément HTML n'est pas encore crée
voici mon code :
html :
Code : Tout sélectionner
<section>
<article>
<img id="voiture" src="img/voitureBmw.jpg" alt="voiture" title="Photo de Mike provenant de Pexels">
<p>Permis voiture</p>
</article>
<article>
<img id="moto" src="img/motoBmw.jpg" alt="moto" title="Photo de Sourav Mishra provenant de Pexels">
<p>Permis deux roues</p>
</article>
</section>
<section id="formationvoiture" class="modal">
La voiture
</section>
Code : Tout sélectionner
.modal{
display: none;
}
#formationvoiture{
position:absolute;
margin:0;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.644);
}
js :
Code : Tout sélectionner
"use strict"
let modal;
function menu(){
let voirMenu;
voirMenu = document.getElementById("formationvoiture");
console.log(voirMenu);
voirMenu.classList.remove('modal');
}
window.addEventListener("DOMContentLoaded",function(){
modal = document.getElementById('voiture');
modal.addEventListener('click',menu);
});
merci d'avance pour l'aide