Sommaire

Les fenêtres modales PLUGINS JAVASCRIPT:Fenêtres modales

1. L’objectif

Nous pouvons faire apparaître une fenêtre de contenu au clic d’un bouton par exemple. Cela va permettre d’afficher des informations complémentaires sur un produit par exemple.

Nous allons utiliser une fenêtre modale, cela implique que lorsque la fenêtre va apparaître à l’écran, l’utilisateur va devoir utiliser les boutons d’action qui sont dans cette fenêtre avant de faire quoi que ce soit d’autre dans l’écran. Une fenêtre modale bloque toute autre action.

Retrouvez cet exemple dans le fichier Bootstrap-08-JavaScript/03-modal.html.

2. La fenêtre modale

Commençons par le code utilisé pour afficher la fenêtre modale. Cette fenêtre peut être composée de trois parties : un en-tête (<div class="modal-header">), un corps (<div class="modal-body">) et un pied de page (<div class="modal-footer">). Dans cet exemple, nous créons une fenêtre complète.

Les fenêtres sont constituées par de nombreuses boîtes <div> imbriquées. La boîte <div> racine contient tous les attributs nécessaires à son bon fonctionnement.

<div class="modal fade" id="plus-info" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
   ... 
</div> ...