11521 sujets

JavaScript, DOM et API Web HTML5

Fermeture modal avec Dialog JS / HTML

Salut,

J'utilise un système de modale avec l'élément 
<dialog>
.

Ma fenêtre s'ouvre et se ferme bien via les boutons qui leur sont destinés.
Mais dans mon JS je n'arrive pas à comprendre comment fermer la modale en cliquant sur une zone libre.

Voici mon code en HTML :



<dialog class="modal">

<div class="container">

<div class="content-1">

<div class="content-2">

<div class="close-modal">

<a autofocus>

<i class="fa-solid fa-xmark"></i>

</a>

</div>

</div>

<h3>Reportage M6</h3>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem, temporibus animi modi eum repellendus eius. Amet itaque, accusamus ut at eligendi minus, quae a nostrum, voluptatem quod magnam vitae explicabo.
</p>
                      
</div>

</div>
                   
</dialog>
<a>Ouvrir</a>


Mon JS ressemble à cela :
const dialog = document.querySelector("dialog");
const showButtonA = document.querySelector("dialog + a");

showButtonA.addEventListener("click", () => {
  dialog.showModal();
  document.body.classList.add("no-scroll");
  dialog.classList.add("anim-fade");
});

closeButton.addEventListener("click", () => {
  dialog.close();
  document.body.classList.remove("no-scroll");
  dialog.classList.remove("anim-fade");
});

Modifié par tc-web (10 May 2024 - 11:36)
Bonjour,

a écrit :
je n'arrive pas à comprendre comment fermer la modale en cliquant sur une zone libre.


Si par cliquer sur une zone libre tu entends par là un clic en-dehors de l'élément <dialog>, rien n'est prévu par défaut pour cela. Tu dois l'implémenter toi-même.

Une des possibilités est d'ajouter un <div> qui couvre tout l'écran, avec un z-index plus grand que tout ce qui se trouve en-dessous, mais plus petit que le <dialog>.
Puis tu interceptes le clic sur cet élément pour fermer le dialogue.

En gros ça donne ceci.


<dialog id="dialog">...</dialog>
<div id="overlay">...</div>

#overlay {
background-color: black;
opacity: 0.5;
z-index: 10;
}

dialog {
z-index: 20;
}

overlay.addEventListener('click', e=> {
dialog.style.display='none';
e.stopPropagation();
e.preventDefault();
});

openLink.addEventListener('click', e=> {
dialog.style.display = 'block';
overlay.style.display = 'block';
});



Au passage, pour l'accessibilité, il faut que tu ajoutes un label à ton bouton de fermeture. Soit via aria-label, soit via un texte hors écran (.visually-hidden/.sr_only).
Car dans l'état actuel ton bouton de fermeture n'a aucun intitulé lisible pour un lecteur d'écran ou pour d'autrs outils d'aide technique.

Sans nom accessible, un utilisateur de lecteur d'écran ne pourra pas savoir que ce bouton sert à fermer le dialogue. Tu empêches également de fermer ton dialogue à l'aide des commandes vocales.
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à