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