Bootstrap - Plugin modal

Un modal est une fenêtre enfant superposée à sa fenêtre parent. En règle générale, le but est d'afficher le contenu d'une source distincte qui peut avoir une certaine interaction sans quitter la fenêtre parente. Les fenêtres enfants peuvent fournir des informations, des interactions ou plus.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin modal.js. Sinon, comme mentionné dans le chapitre Présentation des plugins d'amorçage , vous pouvez inclure bootstrap.js ou le fichier bootstrap.min.js minifié .

Usage

Vous pouvez basculer le contenu caché du plugin modal -

Via data attributes - Définir l'attribut data-toggle = "modal" sur un élément de contrôleur, comme un bouton ou un lien, avec un data-target = "#identifier" ou href = "#identifier" pour cibler un modal spécifique (avec l'id = "identifiant") à basculer.
Via JavaScript - En utilisant cette technique, vous pouvez appeler un modal avec id = "identifiant" avec une seule ligne de JavaScript -

$('#identifier').modal(options)

Exemple

Un exemple de fenêtre modale statique est illustré dans l'exemple suivant -

<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</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">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

Details of the preceding code −

Pour appeler la fenêtre modale, vous devez avoir une sorte de déclencheur. Vous pouvez utiliser un bouton ou un lien. Ici, nous avons utilisé un bouton.
Si vous regardez dans le code ci-dessus, vous verrez que dans la balise <button>, le data-target = "#myModal"est la cible du modal que vous souhaitez charger sur la page. Ce code vous permet de créer plusieurs modaux sur la page, puis d'avoir des déclencheurs différents pour chacun d'eux. Maintenant, pour être clair, vous ne chargez pas plusieurs modaux en même temps, mais vous pouvez en créer plusieurs sur les pages à charger à des moments différents.
Il y a deux classes à prendre en compte dans le modal -
- Le premier est .modal, qui identifie simplement le contenu de <div> comme modal.
- Et le second est le .fadeclasse. Lorsque le modal est basculé, cela entraînera un fondu d'entrée et de sortie du contenu.
aria-labelledby = "myModalLabel", attribut référence le titre modal.
L'attribut aria-hidden = "true" est utilisé pour garder la fenêtre modale invisible jusqu'à ce qu'un déclencheur survienne (comme un clic sur le bouton associé).
<div class = "modal-header">, modal-header est la classe pour définir le style de l'en-tête de la fenêtre modale.
class = "close", est une classe CSS close qui définit le style du bouton Fermer 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 de Bootstrap CSS pour définir le style du corps de la fenêtre modale.
class = "modal-footer", est une classe CSS de Bootstrap CSS pour définir le style du pied de page de la fenêtre modale.
data-toggle = "modal", Le basculement de données d'attribut de données personnalisé HTML5 est utilisé pour ouvrir la fenêtre modale.

Options

Certaines options peuvent être transmises via les attributs de données ou JavaScript pour personnaliser l'apparence de la fenêtre modale. Le tableau suivant répertorie les options -

Nom de l'option	Type / Valeur par défaut	Nom d'attribut de données	La description
toile de fond	booléen ou la chaîne 'static' Par défaut: true	toile de fond de données	Spécifiez statique pour un arrière-plan, si vous ne souhaitez pas que le modal soit fermé lorsque l'utilisateur clique en dehors du modal.
clavier	booléen Valeur par défaut: true	clavier de données	Ferme le modal lorsque la touche d'échappement est enfoncée; mis à false pour désactiver.
montrer	booléen Valeur par défaut: true	exposition des données	Affiche le modal une fois initialisé.
éloigné	chemin Par défaut: faux	data-remote	À l'aide de la méthode jQuery .load , injectez du contenu dans le corps modal. Si un href avec une URL valide est ajouté, il chargera ce contenu. Un exemple de ceci est montré ci-dessous - `<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>`

Méthodes

Voici quelques méthodes utiles qui peuvent être utilisées avec modal ().

Méthode	La description	Exemple
Options - .modal (options)	Active votre contenu en tant que modal. Accepte un objet d'options facultatif.	`$('#identifier').modal({ keyboard: false })`
Toggle - .modal ('bascule')	Bascule manuellement un modal.	`$('#identifier').modal('toggle')`
Show - .modal ('afficher')	Ouvre manuellement un modal.	`$('#identifier').modal('show')`
Hide - .modal ('cacher')	Cache manuellement un modal.	`$('#identifier').modal('hide')`

Exemple

L'exemple suivant montre l'utilisation des méthodes -

<h2>Example of using methods of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</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">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

Cliquez simplement sur le bouton Echap et la fenêtre modale se ferme.

Événements

Le tableau suivant répertorie les événements à utiliser avec modal. Ces événements peuvent être utilisés pour se connecter à la fonction.

un événement	La description	Exemple
show.bs.modal	Lancé après l'appel de la méthode show.	`$('#identifier').on('show.bs.modal', function () { // do something… })`
montré.bs.modal	Lancé lorsque le modal a été rendu visible à l'utilisateur (attendra la fin des transitions CSS).	`$('#identifier').on('shown.bs.modal', function () { // do something… })`
hide.bs.modal	Lancé lorsque la méthode d'instance hide a été appelée.	`$('#identifier').on('hide.bs.modal', function () { // do something… })`
hidden.bs.modal	Lancé lorsque le modal a fini d'être caché à l'utilisateur.	`$('#identifier').on('hidden.bs.modal', function () { // do something… })`

Exemple

L'exemple suivant illustre l'utilisation des événements -

<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</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">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </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>

Comme le montre l'écran ci-dessus, si vous cliquez sur le bouton Fermer, c'est-à-dire masquer l' événement, un message d'alerte s'affiche.