Skip to main content

Modal

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.

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()

Options

  • Name
    Type
    Default
    Description
  • overlaySelector
    CSS selector
    ".overlay"
  • overlayActiveClass
    CSS class
    "overlay--active"
  • closeButtonSelector
    CSS selector
    ".modal__close-button"
  • modalOpenClass
    CSS class
    "modal--open"
  • openButtonActiveClass
    CSS class
    "modal__open-button--active"
  • focusOnFirstFocusable
    Boolean
    true

Code

Dossier de base

Dossier de base

Éléments partagés requis

Overlay