-
LangagesJS, SCSS, HTML
-
DépendancesAucune
-
Normes WCAGOui
-
AuteursIan Reid Langevin
Description
Plusieurs modal dans une même page possible. Seulement vous assurez que le ID
de votre modal et l'attribut data-target
de votre bouton soient unique.
Demo
Cliquez sur le bouton suivant pour ouvrir le modal.
Press escape, click on the body overlay or on the close button to get rid of me!
Documentation
Par défaut, lors de l'ouverture, le premier élément focusable a le focus. Cela est utile pour un <form>
dans un modal ou le premier champ serait déjà focus. L'option focusOnFirstFocusable
permet de désactiver ce comportement.
Le focus est trapped dans le modal permettant une navigation avec tab
vers l'avant ou avec tab + shift
vers l'arrière.
Importez la fonction dans votre projet
import { Modal } from "./functions/modal.js"
Créez et initialisez une instance
// create an instance with your options
const myModal = new Modal(".modal__open-button", {
// your options here - see docs
})
// init your newly created instance
myModal.init()