Fenêtre modale

Dialogue modal avec overlay, fermeture Échap et piège de focus.

Taille par défaut (medium)

Sans modificateur de largeur, la boîte suit la largeur standard du design system.

<button type="button" class="bj-btn" data-bj-modal-open="id">Ouvrir</button>
<div class="bj-modal" id="id" role="dialog" aria-modal="true" aria-labelledby="id-t">
  <div class="bj-modal__overlay" data-bj-modal-close tabindex="-1"></div>
  <div class="bj-modal__dialog">
    <header class="bj-modal__header">
      <h2 class="bj-modal__title" id="id-t">Titre</h2>
      <button type="button" class="bj-modal__close" data-bj-modal-close aria-label="Fermer">
        <i class="ri-close-line" aria-hidden="true"></i>
      </button>
    </header>
    <div class="bj-modal__body">…</div>
    <footer class="bj-modal__footer">…</footer>
  </div>
</div>

<div class="bj-modal" id="id" role="dialog" aria-modal="true" aria-labelledby="id-t">…</div>

Petite (sm)

Idéal pour les confirmations courtes ou les messages légers.

<div class="bj-modal bj-modal--sm" id="ex-sm" role="dialog" aria-modal="true" aria-labelledby="ex-sm-t">…</div>

Grande (lg)

Pour formulaires ou tableaux plus larges dans le corps du dialogue.

<div class="bj-modal bj-modal--lg" id="ex-lg" role="dialog" aria-modal="true" aria-labelledby="ex-lg-t">…</div>

Plein écran (full)

Occupe presque toute la hauteur utile (visionneuse, assistant, contenu dense).

<div class="bj-modal bj-modal--full" id="ex-full" role="dialog" aria-modal="true" aria-labelledby="ex-full-t">…</div>

Attributs et état ouvert

data-bj-modal-open / data-bj-modal-close ; bj-modal-open sur le body. Le script DSBJ ouvre la modale en posant data-bj-expanded sur le conteneur bj-modal; le style affiche alors la boîte ( bj-modal--openedéquivaut à un état ouvert sans JS).

Classes CSS

Classe / attribut	Description
`bj-modal`	Conteneur plein écran ; masqué par défaut, visible avec data-bj-expanded ou bj-modal--opened.
`data-bj-expanded`	État ouvert : posé par le script sur le conteneur bj-modal. Sans JS, bj-modal--opened joue le même rôle pour l’affichage.
`bj-modal__overlay`	Fond cliquable pour fermer (souvent avec data-bj-modal-close).
`bj-modal__dialog`	Boîte de dialogue (largeur max selon la taille).
`bj-modal__header`	En-tête optionnel (titre + fermeture).
`bj-modal__title`	Titre de la modale ; cible de aria-labelledby.
`bj-modal__close`	Bouton de fermeture (icône seule ; aria-label requis).
`bj-modal__body`	Zone de contenu principale.
`bj-modal__footer`	Pied optionnel (actions).
`bj-modal--sm / bj-modal--lg / bj-modal--full`	Largeurs : petite, grande, plein écran.
`data-bj-modal-open`	Sur le bouton d’ouverture : valeur = id de la modale.
`data-bj-modal-close`	Sur un contrôle qui ferme : overlay, bouton, liens du pied.