Foundation Modal

Une fenêtre modale est une fenêtre contextuelle qui apparaît en haut de la page.

Nous pouvons, sur un élément conteneur (tel que<div id="myModal") utiliser un ID unique, et ajouter.reveal-modalclasse etdata-revealUtilisez l'attribut pour ajouter une fenêtre modale. Nous pouvons l'utiliser sur n'importe quel élément.data-reveal-id="id"un attribut pour ouvrir la fenêtre modale.idIl doit correspondre à l'ID du conteneur (par exemple, "myModal").

Si vous souhaitez fermer la fenêtre modale en cliquant sur la zone située à l'extérieur de celle-ci, vous pouvez utiliser le bouton de fermeture de la fenêtre modale.<a>Ajoutez à la balise.close-reveal-modalclasse à implémenter.

Remarque :Le slider nécessite JavaScript. Vous devez donc initialiser Foundation JS :

Exemple

<!-- Trigger the Modal -->
<button type="button" class="button" data-reveal-id="myModal">Cliquez pour ouvrir la modale</button>

<!-- Le contenu de la modale -->
<div id="myModal" class="reveal-modal" data-reveal>
  <h2>Titre dans la modale.</h2>
  <p>Du texte dans la modale.</p>
  <p>Du texte dans la modale.</p>
  <a class="close-reveal-modal">&times;</a>
</div>

<!-- Initialiser Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

Essayez-le vous-même »

Taille de la modale

Vous pouvez ajouter les classes suivantes au conteneur de la modale pour définir sa taille :

  • .tiny: 30% de largeur
  • .small: 40% de largeur
  • .medium: 60% de largeur
  • .large: 70% de largeur
  • .xlarge: 95% de largeur
  • .full: 100% de largeur et de hauteur

Remarque :La largeur par défaut est de 80% sur les tablettes, les ordinateurs portables et les PC, et de 100% de largeur sur les appareils à petit écran.

Exemple

<div id="myModal" class="reveal-modal tiny|small|medium|large|xlarge|full" data-reveal>

Essayez-le vous-même »

Modale imbriquée

Vous pouvez imbriquer une modale dans une modale et ajouter un nouveau bouton déclencheur à la première modale. Vous devez définir un id unique pour la modale imbriquée :

Exemple

<!-- Déclencher la modale -->
<a href="#" class="button" data-reveal-id="myModal">Cliquez pour ouvrir la modale</a>

<!-- La première modale -->
<div id="myModal" class="reveal-modal" data-reveal>
  <h2>Première modale</h2>
  <p>Du texte..</p>
  <p><a href="#" data-reveal-id="secondModal" class="button">Ouvrir la seconde modale</a></p>
  <a class="close-reveal-modal">&times;</a>
</div>

<!-- La deuxième fenêtre modale -->
<div id="secondModal" class="reveal-modal" data-reveal>
  <h2>Tada ! Deuxième fenêtre modale</h2>
  <p>Du texte..</p>
  <a class="close-reveal-modal">&times;</a>
</div>

Essayez-le vous-même »

La deuxième fenêtre modale remplacera la première fenêtre modale. Si vous voulez que la première fenêtre modale ne se ferme pas lorsque la deuxième fenêtre modale est ouverte, vous pouvez l'ajouter à la deuxième fenêtre modale.data-options="multiple_opened:true;"Attributs :

Exemple

<div id="secondModal" class="reveal-modal" data-reveal data-options="multiple_opened:true;">

Essayez-le vous-même »
autres extensions