TP : fenêtre modale RÉSOLUT

zancanaro
Javascript

Bonjour,
J'ai posé la question directement sur la page du tuto https://www.grafikart.fr/tutoriels/modal-javascript-css-72 , mais je pense qu'elle à plus sa place ici.
D'après la vidéo à ce stade ma modal devrait s'ouvrir, mais dans mon cas ça ne fonctionne pas. J'ai pas d'erreurs dans ma console. J'ai beau essayer de comparer mon code et celui de la vidéo je ne vois pas de différence. Sûrement trop le nez dessus depuis deux jours. Un regard neuf pour m'aider à déboguer. J'ai quelques bases en JS, quelques...
Voici mon code html

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8">
    <title>Modal</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="#modal1" class="js-modal">Modal 1</a>
    <aside id="modal1" class="modal" aria-hidden="true" role="dialog" aria-labelledby="titlemodal" style="display:none;"> 
        <div class="modal-wrapper">
            <h2 id="titlemodal">Ennivrez vous</h2>
            <p>Il faut être toujours ivre, tout est là ; 
                c'est l'unique question. 
                Pour ne pas sentir l'horrible fardeau du temps qui brise vos épaules et vous penche vers la terre, 
                il faut vous enivrer sans trêve.
                Mais de quoi ? De vin, de poésie, ou de vertu à votre guise, mais enivrez-vous!

                Et si quelquefois, sur les marches d'un palais, sur l'herbe verte d'un fossé,
                vous vous réveillez, l'ivresse déjà diminuée ou disparue, demandez au vent, 
                à la vague, à l'étoile, à l'oiseau, à l'horloge; à tout ce qui fuit, 
                à tout ce qui gémit, à tout ce qui roule, à tout ce qui chante, 
                à tout ce qui parle, demandez quelle heure il est. Et le vent, la vague, 
                l'étoile, l'oiseau, l'horloge, vous répondront, il est l'heure de s'enivrer ; 
                pour ne pas être les esclaves martyrisés du temps, enivrez-vous, enivrez-vous sans cesse de vin, 
                de poésie, de vertu, à votre guise. </p>
                <p>Charles Baudelaire</p>
                <input type="text">
                <a href="#">lien</a>

        </div>
    </aside>
    <script> src="app.js"</script>

</body>
</html>

Et mon code JS

const openModal = function(event){
    event.preventDefault()
    const target = document.querySelector(event.target.getAttribute('href'))
    target.style.display = null
    target.removeAttribute('aria-hidden')
    target.setAttribute('aria-modal', 'true')
}

document.querySelectorAll('.js-modal').forEach(a => {
    a.addEventListener('click', openModal)

})

Peut-être qu'un regard neuf verra le problème.
Merci d'avance.
Vincent

3 réponses

Lartak

Bonjour.
Il n'y a pourtant pas de problème avec ton code, regardes ici.

zancanaro
Auteur

Je vais essayer de comprendre ce qui cloche chez moi. J'ai désactivé le css mais ça change rien.
??????
Merci de t'être penché dessus.
Vincent

zancanaro
Auteur

J'ai trouvé l'erreur, celle d'un débutant qui n'a pas encore les bon automatisme. Mon lien entre la page html et la page app.js était mal ecrit, donc il n'y avait pad de relation... GRRRRRRRR!

<script > src="app.js"</script>

au lieu de :

<script type="text/javascript" src="app.js"> </script>