Bootstrap Plugin Modal
Une fenêtre modale est une fenêtre enfant qui se superpose à la fenêtre parente. Généralement, le but est d'afficher du contenu provenant d'une source distincte, permettant une certaine interaction sans quitter la fenêtre parente. Les fenêtres enfants peuvent fournir des informations, une interaction, etc.
Si vous souhaitez référencer les fonctionnalités de ce plugin séparément, vous devez alors référencermodal.js. Ou, commePrésentation des plugins Bootstrapmentionnée dans le chapitre, vous pouvez référencerbootstrap.jsou la version compressée debootstrap.min.js。
Utilisation
Vous pouvez basculer le contenu masqué du plugin Modal :
- Via les attributs data: Définissez des attributs sur un élément de contrôle (comme un bouton ou un lien)data-toggle="modal", et définissezdata-target="#identifier"ouhref="../index.html"pour spécifier la modale particulière à basculer (avec id="identifier").
- Via JavaScript: En utilisant cette technique, vous pouvez invoquer une modale avec id="identifier" avec une simple ligne de JavaScript :
$('#identifier').modal(options)
Exemple
Un exemple de fenêtre modale statique, comme montré dans l'exemple ci-dessous :
Exemple
<h2>Créer une modale</h2>
<!--Le bouton déclenche la modale-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Lancer la modale de démonstration</button>
<!--Modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Titre de la fenêtre modale</h4>
</div>
<div class="modal-body">Ajoutez du texte ici</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary">Soumettre les modifications</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
Essayez-le »
Le résultat est le suivant :
Explication du code :
- Pour utiliser une fenêtre modale, vous avez besoin d'un déclencheur. Vous pouvez utiliser un bouton ou un lien. Ici, nous utilisons un bouton.
- Si vous regardez attentivement le code ci-dessus, vous trouverez dans la balise <button>,data-target="#myModal"est la cible de la modale que vous souhaitez charger sur la page. Vous pouvez créer plusieurs modales sur la page, puis créer différents déclencheurs pour chaque modale. Maintenant, évidemment, vous ne pouvez pas charger plusieurs modales en même temps, mais vous pouvez en créer plusieurs sur la page pour les charger à des moments différents.
- Il y a deux choses à noter dans la modale :
- Le premier est.modal, utilisé pour identifier le contenu du <div> comme une modale.
- Le second est la classe.fade. Lorsque la modale est basculée, cela fait apparaître et disparaître le contenu en fondu.
- aria-labelledby="myModalLabel", cet attribut fait référence au titre de la modale.
- L'attributaria-hidden="true"est utilisé pour garder la fenêtre modale invisible jusqu'à ce que le déclencheur soit activé (par exemple, en cliquant sur le bouton correspondant).
- <div class="modal-header">, modal-header est une classe qui définit les styles pour l'en-tête de la fenêtre modale.
- class="close", close est une classe CSS utilisée pour styliser le bouton de fermeture de la fenêtre modale.
- data-dismiss="modal", est un attribut de données HTML5 personnalisé. Ici, il est utilisé pour fermer la fenêtre modale.
- class="modal-body", est une classe CSS dans Bootstrap CSS, utilisée pour styliser le corps de la fenêtre modale.
- class="modal-footer", est une classe CSS dans Bootstrap CSS, utilisée pour styliser le pied de page de la fenêtre modale.
- data-toggle="modal", l'attribut de données personnalisé HTML5 data-toggle est utilisé pour ouvrir la fenêtre modale.
Options
Il existe quelques options qui peuvent être utilisées pour personnaliser l'apparence et la convivialité de la fenêtre modale. Elles sont transmises via des attributs de données ou JavaScript. Le tableau suivant répertorie ces options :
| Nom de l'option | Type/Valeur par défaut | Nom de l'attribut de données | Description |
|---|---|---|---|
| backdrop | booléen ou chaîne 'static' Valeur par défaut : true | data-backdrop | Spécifie un arrière-plan statique ; lorsque l'utilisateur clique à l'extérieur de la fenêtre modale, celle-ci ne se ferme pas. |
| keyboard | booléen Valeur par défaut : true | data-keyboard | Ferme la fenêtre modale lorsque la touche Échap est enfoncée. Si défini sur false, la touche n'a aucun effet. |
| show | booléen Valeur par défaut : true | data-show | Affiche la fenêtre modale lors de l'initialisation. |
| remote | path Valeur par défaut : false | data-remote | En utilisant la méthode jQuery.load, injecte du contenu dans le corps de la fenêtre modale. Si un href avec une URL valide est ajouté, le contenu sera chargé à partir de celui-ci. Comme le montre l'exemple ci-dessous :<a data-toggle="modal" href="remote.html" data-target="#modal" rel="noopener noreferrer">请点击我</a> |
Méthodes
Voici quelques méthodes utiles qui peuvent être utilisées avec modal().
| Méthode | Description | Exemple |
|---|---|---|
| Options : .modal(options) | Active le contenu en tant que fenêtre modale. Accepte un objet d'options facultatif. |
$('#identifier').modal({
keyboard: false
})
|
| Basculer : .modal('toggle') | Bascule manuellement la fenêtre modale. |
$('#identifier').modal('toggle')
|
| Afficher : .modal('show') | Ouvre manuellement la fenêtre modale. |
$('#identifier').modal('show')
|
| Masquer : .modal('hide') | Masque manuellement la fenêtre modale. |
$('#identifier').modal('hide')
|
Exemple
L'exemple suivant illustre l'utilisation des méthodes :
Exemple
<!--Modale-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Titre de la fenêtre modale</h4>
</div>
<div class="modal-body">Appuyez sur la touche ESC pour quitter.</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary">Soumettre les modifications</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Essayez-le vous-même »
Le résultat est le suivant :
Appuyez simplement sur la touche ESC, et la fenêtre modale se fermera.
Événements
Le tableau suivant répertorie les événements utilisés dans la fenêtre modale. Ces événements peuvent être utilisés comme points d'accroche dans les fonctions.
| Événement | Description | Exemple |
|---|---|---|
| show.bs.modal | Déclenché après l'appel de la méthode show. |
$('#identifier').on('show.bs.modal', function () {
// 执行一些动作...
})
|
| shown.bs.modal | Déclenché lorsque la modale est visible par l'utilisateur (attendra que les transitions CSS soient terminées). |
$('#identifier').on('shown.bs.modal', function () {
// 执行一些动作...
})
|
| hide.bs.modal | Déclenché lorsque la méthode d'instance hide est appelée. |
$('#identifier').on('hide.bs.modal', function () {
// 执行一些动作...
})
|
| hidden.bs.modal | Déclenché lorsque la modale est complètement masquée pour l'utilisateur. |
$('#identifier').on('hidden.bs.modal', function () {
// 执行一些动作...
})
|
Exemple
L'exemple suivant montre l'utilisation des événements :
Exemple
<!--Modale-->
<h2>Événements du plugin Modal</h2>
<!--Le bouton déclenche la modale-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Lancer la modale de démonstration</button>
<!--Modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Titre de la fenêtre modale</h4>
</div>
<div class="modal-body">Cliquez sur le bouton de fermeture pour vérifier la fonctionnalité de l'événement.</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="button" class="btn btn-primary">Soumettre les modifications</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script>
$(function() {
$('#myModal').modal('hide')
});
</script>
<script>$(function() {
$('#myModal').on('hide.bs.modal',
function() {
alert('Hey, I heard you like modals...');
})
});</script>
Essayez-le vous-même »
Le résultat est le suivant :
Comme indiqué dans l'exemple ci-dessus, si vous cliquez sur le boutonClose, c'est-à-dire l'hideévénement, un message d'alerte s'affichera.
Autres extensions