Le Tutoriel de Bootstrap Model

View more Tutorials:

1- Bootstrap Model

Model est un  Dialog (Dialogue) ou un  Popup (une fenêtre intruse). Il affiche sur tous les autres contenus de la page en cours. Le but du Model est de notifier aux utilisateurs quelque chose des applications ou d'attendre que les utilisateurs saisissez des informations.
Malgré  Javascript soutient quelques  dialog (dialogue) différentes telles que  Confirm, Alert, Open File, Save file,.. mais clairement, ces  dialog ne sont pas personnalisées donc vous attendez de meilleures choses.
D'abord, observez un exemple :
model-example1.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Model Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>
      <!-- Button to Open the Modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
           Open modal
      </button>

      <!-- The Modal -->
      <div class="modal" id="myModal">
         <div class="modal-dialog">
            <div class="modal-content">
               <!-- Modal Header -->
               <div class="modal-header">
                  <h4 class="modal-title">Modal Heading</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
               </div>
               <!-- Modal body -->
               <div class="modal-body">
                  Modal body..
               </div>
               <!-- Modal footer -->
               <div class="modal-footer">
                  <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
               </div>
            </div>
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
  
</html>
Ci-dessous, la structure d'un  Model. L'élément  div.model-content est le lieu que vous vous intéressez. Il se compose de 3 zones :  Header, Body & Footer, et vous pouvez personnaliser tous ces trois zones.
Model Attributes
<div class="modal" id="myModal"
   data-backdrop="static"
   data-keyboard="false"
   tabindex="-1"
   aria-labelledby="myModalLabel"
   aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <!-- Modal Header -->
         <div class="modal-header">
            <h4 class="modal-title">Modal Title</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>
         <!-- Modal body -->
         <div class="modal-body">
            Modal body..
         </div>
         <!-- Modal footer -->
         <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
Attribut
(Attribute)
Description
data-backdrop Cet attribut comprend deux valeurs : true ou static. Par défaut, elle est true, celà signifie que l'utilisateur peut cliquer sur l'arrière-plan (background) pour fermer le Model.
data-keyboard Cet attribut comprend deux valeurs :  true ou false. Par défaut, elle est false, si elle est true l'utilisateur peut fermer le Model en cliquant sur le bouton ESC.
aria-labelledby L'attribut de HTML5
aria-hidden L'attribut de​​​​​​​  HTML5
La classe  .fade vous permet de créer des effets lorsque le  Model cache ou affiche.
.fade
<div class="modal fade" id="myModal">
   <div class="modal-dialog">
      <div class="modal-content">
        
         <div class="modal-header">
            <h4 class="modal-title">Modal Title</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>
        
         <div class="modal-body">
            Modal body..
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>
Exemple : créez un  Model qui ne contient pas le bouton  "X" (Trouvé dans le coin supérieur droit du​​​​​​​ Model).
Model without X button
<div class="modal" id="myModal">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title">Modal Title</h4>
         </div>
         <div class="modal-body">
            Modal body..
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

2- Model & jQuery

Vous pouvez utiliser  JQuery pour inteagir avec le  Model, par exemple : cacher ou afficher le  Model.
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
Ou plus complet :
$('#myModal').modal(options);

// Example:

var options = {
  'backdrop' : 'static',
  'keyboard' : true,
  'show' : true,
  'focus' : false
}
Option
Description
backdrop Cet attribut comprend deux valeurs : true ou static. Par défaut, elle est true, celà signifie que l'utilisateur peut cliquer sur l'arrière-plan (background) pour fermer le Model.
keyboard Cet attribut comprend deux valeurs :  true ou false. Par défaut, elle est false, si elle est true l'utilisateur peut fermer le Model en cliquant sur le bouton ESC.
show Cet attribut comprend deux valeurs :  true ou false. Il cache ou affiche le Model.
focus Cet attribut comprend deux valeurs :  true ou false, par défaut elle est false. Si elle est true, Model sera focalisé lors de sa création.

3- Des événements de Model

Certains événements sont déclenchés (fired) lorsque le Model s'ouvre ou se ferme. Et vous pouvez attraper ces événements pour faire quelque chose. Utilisez la méthode " on" de jQuery pour lier l'événement avec le gestionnaire.
Événement Description
show.bs.modal Cet événement est déclenché (fired) immédiatement avant que le Model affiche.
shown.bs.modal Cet événement est déclenché (fired) immédiatement après que le Model a affiché.
hide.bs.modal Cet événement est déclenché (fired) immédiatement avant que le Model est caché.
hidden.bs.modal Cet événement est déclenché (fired) immédiatement après que le Model a été caché.
Voucc pouvez gérer un de ces événements comme ci-dessous :
$('#myModel').on('shown.bs.modal', function (e) {
  alert('Modal is successfully shown!');
});

View more Tutorials: