Démonstration

• Fenêtre modale
• Boîte de dialogue modale
• Boîte de dialogue modale sans bouton de fermeture
• Boîte d’alerte modale
• Notification d'erreur
• Menu de navigation

Description

Le script d'overlay peut être instantié de deux façons différentes :

• En lui passant un objet de paramètres dont un élément HTML représentant le contenu à encapsuler dans un overlay ;
• En lui passant l'élément HTML à afficher en tant qu'overlay.

Implémentation

CSS

Aucune classe CSS n'est requise pour faire fonctionner le script. Il est recommandé de s'assurer que les overlays ayant l'attribut aria-hidden à true soient invisibles :

.overlay-wrapper[aria-hidden="true"] {
  display: none;
}

<!-- exemple de contenu d'overlay -->
<section class="modal modal">
  <header class="modal-header">
    <button class="button-close">
      <span>Fermer</span>
    </button>
    <h2 class="modal-title">Fenêtre modale</h2>
  </header>
  <div class="modal-content">
    <p>Les popins sont des fenêtres qui apparaissent directement à l'intérieur de la fenêtre courante du navigateur, au-dessus de la page web qui les appelle.</p>
    <p>Il s'agit de fenêtres modales, c'est-à-dire de fenêtres qui prennent le <strong>contrôle de la page courante</strong> tant qu'elles sont affichées à l'écran.</p>
  </div>
</section>

// Il est possible de créer un overlay en lui passant le contenu souhaité…
var overlay = new Overlay( {
  content: document.querySelector( '.overlay' )
});

// … ou une string HTML
var overlay = new Overlay( {
  content: '<div><p>Bonjour</p></div>'
});

// Ouvre l'overlay
overlay.show();

// Ferme l'overlay
overlay.close();

<!-- exemple d'overlay complet -->
<div role="alertdialog" class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDesc">
  <section class="modal">
    <header class="modal-header">
      <button class="button-close">
        <span>Fermer</span>
      </button>
      <h2 class="modal-title" id="modalTitle">Attention</h2>
    </header>
    <div class="modal-content">
      <p id="modalDesc">Pour continuer, vous devez vous assurer que vous avez reçu votre numéro de confirmation.</p>
    </div>
  </section>
</div>

var overlay = new Overlay( document.querySelector( '.modal' ), {
  closeOnCancel: false,
  opener: document.querySelector( 'button' ),
  closeSelector, // selecteur CSS permetant de cibler les élément qui fermeront l'overlay au clic
  modal // booléen `true`  par défaut
});

// Ouvre l'overlay
overlay.show();

// Ferme l'overlay
overlay.close();

Méthodes

Propriétés

Propriétés statiques

Contrairement aux propriétés des instances, les propriétés statiques sont disponibles sur le constructeur.

Évènements

Lors de la fermeture d'un overlay, un évènement close est déclenché sur l'élément.

overlay.addEventListener( 'close', function( e ){
  // script utilisateur pour gérer la fermeture de l'overlay

  // remet l’élément dans son emplacement d’origine dans le DOM
  overlay.reset();
});

Dans le cas où l'utilisateur utilise la touche « Echap » ou bien clique en dehors de l'overlay lorsque celui-ci n'a pas le role alertdialog, un évènement cancel est déclenché sur l'overlay. Cet évènement permet d'annuler la fermeture de l'overlay en utilisant .preventDefault().

overlay.addEventListener( 'cancel', function( e ){
  // script utilisateur pour gérer la touche « Echap » ou le clic extérieur.

  // annule la fermeture de l'overlay
  e.preventDefault();
});

Script

Le script est disponible sur npm :

$ npm install @accede-web/overlay

Il ne reste alors qu'à l'appeler dans le script souhaité :

import Overlay from '@accede-web/overlay';

var overlay = new Overlay({…});

Dans le cas où ce script est utilisé avec babel et Webpack ou Rollup, il faut configurer babel afin qu'il compile ce plugin. Cela est possible via le fichier .babelrc ou dans les configurations de Webpack et Rollup :

{
  "exclude": "node_modules/!(@accede-web)/**",
}

Cette ligne continura d'exclure les scripts contenus dans le répertoire node_modules sauf ceux s'appelant @accede-web.

Le plugin est aussi téléchargeable depuis Github :
https://github.com/AcceDe-Web/overlay.

Le fichier est disponible en version minifiée ou non-minifiée dans le répertoire dist. Il est ensuite disponible sur l'objet window :

<script src="overlay.min.js"></script>

<script>
  var overlay = new window.Overlay({…});
</script>

Compatibilité

Ce composant a été testé sur les navigateurs suivants :

• Internet Explorer 10 et supérieur
• Microsoft Edge
• Chrome
• Firefox
• Safari

Pour fonctionner dans les navigateurs Internet Explorer, l'ajout d'un polyfill pour les Custom Event est requis. Vous pouvez utiliser celui se trouvant sur la page MDN de CustomEvent().

Aller plus loin

Le script de cette page est basé sur les notices d’accessibilité pour les composants d’interface riche des fenêtres modales (popins), boîtes de dialogue modales (popins de dialogue), et boîtes d’alerte modales (popins d’alerte), AcceDe Web d’Atalan.

N’hésitez pas à aller faire un tour chez eux pour approfondir le sujet.