Modale
Note d'accessibilité
Attention! N'oubliez pas de définir le aria-label du bouton de fermeture de votre modale!
Usage Modale
- S'assurer que l'attribut data-modale-id="" soit le même pour le bouton déclencheur et la modale associée.
- S'assurer que l'attribut aria-labelledby="" du conteneur de la modale et que le id="" sur le titre, tag h aient la même valeur.
- Idéalement La ou les modales doivent être des enfants directs du body si ce n'est pas possible, au moins faire en sorte que ce soit à l'extérieur du main
Modale courte
Lorem ipsum dolor sit
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum, voluptatum fugiat. Animi voluptates perspiciatis obcaecati exercitationem. Vitae dignissimos adipisci expedita sedeius!
<button class="hq-bouton-primaire js-hq-modale-btn" data-modale-id="modale-1001" aria-haspopup="dialog">
<span class="js-bouton-texte">Lancer la modale</span>
</button>
<div data-modale-id="modale-1001" aria-modal="true" role="dialog" aria-labelledby="title-id-1" class="hq-modal js-hq-modale hq-modal-courte" aria-hidden="true">
<div class="hq-modal-content">
<button class="hq-bouton-texte hq-modal-close-btn hq-bouton-fermer js-hq-close-btn" aria-label="Fermer" data-last-word="false">
<span class="hq-icone-bouton js-bouton-icon">
<svg class="hq-icone-large" aria-hidden="true">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-fermer-2"></use>
</svg>
</span>
</button>
<div class="hq-modal-text">
<div class="hq-grid hq-grid-cols-4 sm:hq-grid-cols-12">
<div class="hq-col-span-4 sm:hq-col-start-2 sm:hq-col-end-12">
<h2 id="title-id-1" class="hq-titre3 hq-mt-0 hq-modal-titre" tabindex="-1">Lorem ipsum dolor sit</h2>
</div>
<div class="hq-col-span-4 sm:hq-col-start-2 sm:hq-col-end-12 content-inner">
<p class="hq-large">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum, voluptatum fugiat. Animi voluptates perspiciatis obcaecati exercitationem. Vitae dignissimos adipisci expedita sedeius!</p>
<button class="hq-bouton-primaire">Bouton</button>
</div>
</div>
</div>
</div>
</div>
Modale longue
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet lectus rhoncus, aliquam magna vitae, ullamcorper urna. Phasellus a nibh ultrices, fringilla elit non, consectetur eros. Donec efficitur vestibulum lectus ut blandit. Donec laoreet tortor egestas dapibus sagittis. Pellentesque aliquet et sapien non pellentesque. Sed ultrices eu massa vitae vulputate. In porta augue eget placerat convallis. Donec convallis, libero sit amet finibus scelerisque, sapien leo semper dolor, mattis finibus mauris sem eu massa. Phasellus lacinia urna vel magna dignissim, ornare facilisis lectus gravida.
Aliquam non varius ipsum. Nunc at quam iaculis ligula scelerisque tincidunt eget quis nulla. Nulla metus lectus, laoreet ac metus quis, pellentesque iaculis magna. Aliquam erat volutpat. Proin eget placerat tellus. Suspendisse potenti. Morbi dignissim neque eget lacinia porttitor. Nam a aliquam arcu.
Vestibulum eu quam congue, vulputate odio at, commodo nisi. Sed ac libero scelerisque, condimentum mi in, interdum mi. Curabitur venenatis, mi sed sagittis ultricies, nulla neque eleifend elit, et sollicitudin diam erat elementum leo. Morbi molestie tortor vitae diam pulvinar condimentum vel et nulla. In malesuada nibh at maximus ornare. Mauris fermentum vulputate massa at finibus. Proin sed tellus eu magna faucibus pellentesque maximus ut lectus. Ut eu eros vel turpis dictum finibus at sed ligula.
<button class="hq-bouton-primaire js-hq-modale-btn" data-modale-id="modale-1002" aria-haspopup="dialog">
<span class="js-bouton-texte">Lancer la modale</span>
</button>
<div data-modale-id="modale-1002" aria-modal="true" role="dialog" aria-labelledby="title-id-1" class="hq-modal js-hq-modale hq-modal-longue" aria-hidden="true">
<div class="hq-modal-content">
<button class="hq-bouton-texte hq-modal-close-btn hq-bouton-fermer js-hq-close-btn" aria-label="Fermer" data-last-word="false">
<span class="hq-icone-bouton js-bouton-icon">
<svg class="hq-icone-large" aria-hidden="true">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-fermer-2"></use>
</svg>
</span>
</button>
<div class="hq-modal-text">
<div class="hq-grid hq-grid-cols-4 sm:hq-grid-cols-12">
<div class="hq-col-span-4 sm:hq-col-start-2 sm:hq-col-end-12">
<h2 id="title-id-1" class="hq-titre3 hq-mt-0 hq-modal-titre" tabindex="-1">Lorem ipsum dolor sit</h2>
</div>
<div class="hq-col-span-4 sm:hq-col-start-2 sm:hq-col-end-12 content-inner">
<p class="hq-large">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet lectus rhoncus, aliquam magna vitae, ullamcorper urna. Phasellus a nibh ultrices, fringilla elit non, consectetur eros. Donec efficitur vestibulum lectus ut blandit. Donec laoreet tortor egestas dapibus sagittis. Pellentesque aliquet et sapien non pellentesque. Sed ultrices eu massa vitae vulputate. In porta augue eget placerat convallis. Donec convallis, libero sit amet finibus scelerisque, sapien leo semper dolor, mattis finibus mauris sem eu massa. Phasellus lacinia urna vel magna dignissim, ornare facilisis lectus gravida. </p>
<p class="hq-large">Aliquam non varius ipsum. Nunc at quam iaculis ligula scelerisque tincidunt eget quis nulla. Nulla metus lectus, laoreet ac metus quis, pellentesque iaculis magna. Aliquam erat volutpat. Proin eget placerat tellus. Suspendisse potenti. Morbi dignissim neque eget lacinia porttitor. Nam a aliquam arcu. </p>
<p class="hq-large">Vestibulum eu quam congue, vulputate odio at, commodo nisi. Sed ac libero scelerisque, condimentum mi in, interdum mi. Curabitur venenatis, mi sed sagittis ultricies, nulla neque eleifend elit, et sollicitudin diam erat elementum leo. Morbi molestie tortor vitae diam pulvinar condimentum vel et nulla. In malesuada nibh at maximus ornare. Mauris fermentum vulputate massa at finibus. Proin sed tellus eu magna faucibus pellentesque maximus ut lectus. Ut eu eros vel turpis dictum finibus at sed ligula. </p>
</div>
<div class="hq-col-span-4 btn-container sm:hq-col-start-2 sm:hq-col-end-12">
<button class="hq-bouton-texte hq-modal-close-btn hq-bouton-texte js-hq-close-btn" aria-label="" data-last-word="true">
<span class="hq-icone-bouton js-bouton-icon">
<span class="js-bouton-text">Fermer</span>
<svg class="hq-icone-large" aria-hidden="true">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-fermer-2"></use>
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>