Bootstrap Modales
Description
Les modales Bootstrap sont créées à l'aide d'un plugin jQuery personnalisé. Elles peuvent être utilisées pour créer des fenêtres modales afin d'enrichir l'expérience utilisateur, ou d'ajouter des fonctionnalités pratiques pour les utilisateurs. Vous pouvez utiliser des Popovers et des Tooltips dans les modales.
Dans ce tutoriel, nous allons voir comment créer des fenêtres modales avec Bootstrap à travers quelques exemples et explications. Nous aborderons également les différentes options de personnalisation disponibles.
Ce qui est requis
Vous avez besoin de jQuery, du CSS Bootstrap et du fichier JavaScript bootstrap-modal.js. Ce fichier js se trouve dans le dossier js à l'intérieur du dossier principal Bootstrap que vous avez téléchargé.
jQuery se trouve dans docs > assets > js dans votre dossier principal Bootstrap, sous le nom jquery.js. Ou vous pouvez directement visiter https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js pour télécharger jQuery.
À quoi ressemblent les modales Bootstrap
L'exemple ci-dessous montre à quoi ressemblent les modales Bootstrap.
Utiliser les modales Bootstrap sur votre site web
L'exemple ci-dessous montre comment utiliser les modales Bootstrap sur une page web. Notez que vous n'avez pas besoin d'écrire de code JavaScript. Les explications pertinentes sont fournies après l'exemple.
Exemple
<h2>Créer une fenêtre modale avec Bootstrap</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Ceci est un titre de fenêtre modale</h3>
</div>
<div class="modal-body">
<h4>Texte dans la fenêtre modale</h4>
<p>Vous pouvez ajouter du texte ici.</p>
</div>
<div class="modal-footer">
<a href="../index.html" class="btn btn-success">Activité de réveil</a>
<a href="../index.html" class="btn" data-dismiss="modal">Fermer</a>
</div>
</div>
<p><a data-toggle="modal" href="../index.html" class="btn btn-primary btn-large">Lancer la fenêtre modale de démonstration</a></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js.html"></script>
Voir l'exemple Bootstrap Modals en ligne
Explication
Le tableau ci-dessous explique le code ci-dessus. Il vous aidera à comprendre comment utiliser Bootstrap Modals.
| Code | Explication |
|---|---|
| div id="example" | L'id attribué au div concerné ; la valeur de l'id pointe vers le JavaScript qui implémente la modale plus tard. |
| class="modal hide fade in" | Quatre classes CSS Bootstrap - modal, hide, fade et in - sont utilisées pour définir la disposition de la modale. |
| style="display: none; | Sert à garder la fenêtre modale visible jusqu'à ce que le déclencheur soit activé (par exemple en cliquant sur le bouton concerné). |
| <div class="modal-header"> | modal-header est une classe utilisée pour définir le style de l'en-tête de la fenêtre modale. |
| a class="close" | La classe CSS close est utilisée pour styliser le bouton de fermeture de la fenêtre modale. |
| data-dismiss="modal" | data-dismiss est un attribut de données HTML5 personnalisé. Il est utilisé pour fermer la fenêtre modale. |
| class="modal-body" | modal-body est une classe CSS Bootstrap utilisée pour styliser le corps de la fenêtre modale. |
| class="modal-footer" | modal-footer est une classe CSS Bootstrap utilisée pour styliser le pied de la fenêtre modale. |
| class="btn btn-success" | Les classes CSS btn et btn-success sont utilisées pour créer un grand bouton au pied de la fenêtre modale. Vous pouvez utiliser n'importe quel autre bouton Bootstrap à la place. |
| class="btn" | La classe de bouton CSS Bootstrap btn est utilisée pour créer un petit bouton au pied de la fenêtre modale. |
| data-dismiss="modal" | L'attribut de données HTML5 personnalisé data-dismiss est utilisé pour fermer la fenêtre modale. |
| data-toggle="modal" | L'attribut de données personnalisé HTML5 data-toggle est utilisé pour ouvrir la fenêtre modale. |
| class="btn btn-primary btn-large" | Définissez le style du bouton, et un clic sur le bouton crée la fenêtre modale. |
| <script src="https://ajax.googleapis.com/ajax/libs /jquery/1.7.1/jquery.min.js"></script> |
Référencez le fichier jQuery. |
| <script src="../bootstrap/twitter-bootstrap-v2> /js/bootstrap-modal.js.html"></script> |
Référencez le fichier JS pour la fenêtre modale Bootstrap. |
Utilisation de JavaScript
Vous pouvez utiliser JavaScript pour implémenter des fenêtres modales Bootstrap. Appelez simplement modal() dans votre JavaScript. Votre code est présenté ci-dessous, et vous pouvez y faire référence avant la balise body de fermeture (c'est-à-dire </body>).
$(function ()
{ $("#identifier").modal();
});
Ici, identifier est un sélecteur jQuery utilisé pour identifier l'élément conteneur concerné. Examinons maintenant les options disponibles.
Options
Voici quelques options que vous pouvez utiliser pour personnaliser l'apparence et le rendu de la fenêtre modale via modal().
backdrop
L'option backdrop est utilisée pour inclure un élément modal-backdrop.
Si vous remplacez le code à la ligne 2 de l'exemple « Utilisation de JavaScript » par le code suivant, en attribuant la valeur false à l'option backdrop, il n'y aura pas de modal-backdrop du tout.
{ $("#example").modal({backdrop:false});
keyboard
Si l'option keyboard est utilisée, la fenêtre modale se ferme lorsque la touche Échap est enfoncée. Son type est booléen, et sa valeur par défaut est true. Si l'option keyboard est définie sur false, la fenêtre modale ne se fermera pas même lorsque la touche Échap est enfoncée.
Si vous remplacez le code à la ligne 2 de l'exemple « Utilisation de JavaScript » par le code suivant, en attribuant la valeur false à l'option keyboard, appuyer sur Échap ne fermera pas la fenêtre modale.
{ $("#example").modal({keyboard:false});
show
Si l'option show est utilisée, la fenêtre modale est affichée lors de l'initialisation. Son type est booléen, et sa valeur par défaut est true. Si l'option show est définie sur false, la fenêtre modale ne sera pas affichée lors de l'initialisation.
Si vous remplacez le code à la ligne 2 de l'exemple « Utilisation de JavaScript » par le code suivant, en attribuant la valeur false à l'option show, la fenêtre modale ne sera pas affichée lors de l'initialisation.
{ $("#example").modal({show:false});
Méthodes
Voici quelques méthodes utilisées avec modal().
.modal(options)
Cette méthode active le contenu en tant que fenêtre modale. Vous pouvez passer un paramètre options facultatif de type objet. Si vous, dans lepremier exemplede ce tutoriel, ajoutez le code suivant avant la balise </body>, il n'y aura aucun élément modal backdrop du tout.
$('#example').modal({
backdrop: false
})
.modal('toggle')
Cette méthode bascule manuellement une fenêtre modale. Si vous, dans lepremier exemplede ce tutoriel, ajoutez le code suivant avant la balise </body>, vous pouvez basculer manuellement la fenêtre modale.
$('#example').modal('toggle')
.modal(show)
Cette méthode peut être utilisée pour ouvrir manuellement une fenêtre modale. Si, dans lepremier exemplede ce tutoriel, vous ajoutez le code suivant avant la balise </body>, vous pouvez ouvrir manuellement la fenêtre modale.
$('#example').modal('show')
.modal(hide)
Cette méthode peut être utilisée pour masquer manuellement une fenêtre modale. Si, dans lepremier exemplede ce tutoriel, vous ajoutez le code suivant avant la balise </body>, vous pouvez masquer manuellement la fenêtre modale.
$('#example').modal('hide')
Événements
Voici les événements liés aux fenêtres modales. Ces événements sont utilisés pour intercepter et exécuter votre propre code.
show
Cet événement est déclenché immédiatement après l'appel de la méthode d'instance show.
shown
Cet événement est déclenché après l'affichage de la fenêtre modale (et une fois l'effet de transition CSS également terminé).
hide
Cet événement est déclenché immédiatement après l'appel de la méthode d'instance hide.
hidden
Cet événement est déclenché après que la fenêtre modale a été masquée à l'utilisateur (et que la transition CSS est également terminée).
Cliquez ici pour télécharger tous les fichiers HTML, CSS, JS et images utilisés dans ce tutoriel.
Autres extensions