Sommaire

Les fenêtres reveals

1. Les objectifs

Les fenêtres reveals de Foundation sont des fenêtres d’alerte qui s’affichent par un clic de souris et que les utilisateurs doivent fermer avec une case de fermeture. Nous pourrons déterminer la taille de ces fenêtres.

Attention, ce composant utilise du JavaScript, veillez à ce que les liaisons vers tous les fichiers soient bien implémentées. Reportez-vous au chapitre Installer Foundation, à la section Foundation complet - Les liaisons.

2. L’affichage des fenêtres

Dans un premier temps, nous allons insérer une fenêtre d’alerte simple que nous devrons fermer avec une case de fermeture.

La fenêtre est insérée dans un élément <div> utilisant la classe .reveal, l’attribut data-reveal et ayant un identifiant unique id="mon-alerte".

Dans cette boîte <div> vous placez le contenu que vous souhaitez.

Le bouton de fermeture est un élément <button>.

Voici le code complet de cet exemple :

<div class="reveal" id="mon-alerte" data-reveal> 
  <h3>Attention !</h3> 
  <p class="lead">Voici une information importante</p> 
  <p>Vivamus sagittis...</p> 
  <button class="close-button" data-close aria-label="Fermeture"  
type="button"> 
     <span aria-hidden="true">&times;</span>  ...