Modal

Présentation

Le module modal de Scampi est largement basé sur celui de Bootstrap auquel lui a été ajouté le module bootstrap-accessibility-plugin de paypal ainsi que quelques autres modifications pour une pleine conformité RGAA.

Accessibilité

Respect du design pattern https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal

  • focus sur le premier élément tabulable
  • tab et shift-tab ne se déplacent pas en dehors de la fenetre modale
  • fermeture avec Esc ou au clic à l'extérieur de la fenêtre

Utilisation

Le bouton appelant la modale porte les attributs data-toggle="modal" et data-target="#exempleModal"#exempleModal est l’id de la fenêtre modale appelée.

Note : le cas sans js n'a pas encore été traité, cela fera l'objet d'une prochaine mise à jour.

Script associé

Pour que ce module fonctionne, le script associé doit être appelé dans le pied de page, avant la fermeture du body.

Note : copier le script présent dans le module à l'endroit où sont rangés les autres scripts.

Exemple d’utilisation


<button class="btn btn-primary" data-target="#exempleModal" data-toggle="modal">Hop la modale !</button>

<div class="modal fade" id="exempleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button class="btn btn-secondary btn-close" type="button" data-dismiss="modal" title="Fermer" aria-describedby="exampleModalLabel">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Fermer</span>
        </button>
        <h5 class="modal-title" id="exampleModalLabel">Titre de la modale</h5>
      </div>
      <div class="modal-body">
        <p>Contenu de la modale</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consequatur ratione similique ipsa rem ab dicta quaerat voluptate rerum asperiores temporibus illum qui explicabo molestias, quas harum. Dolor, magni, labore.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
        <button type="button" class="btn btn-primary">Continuer</button>
      </div>
    </div>
  </div>
</div>

Démo