Modal

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
tstyle83
Messages : 1
Enregistré le : 20 juil. 2020, 21:12

Modal

Message par tstyle83 » 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 :

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>
css:

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

Répondre