Die Anleitung zu Bootstrap Modal

View more Tutorials:

1- Bootstrap Modal

Modal ist ein  Dialog oder ein  Popup , das oben auf allen anderen Inhalte der momentanen Seite anzeigt. Das Zweck vom  Modal ist, dem Benutzer etwas von der Applikation zu informieren oder auf die Informationeingabe aus dem Benutzer zu warten.
Obwohl unterstützt  Javascript einige verschiedenen  dialog wie  Confirm, Alert, Open File, Save file,.. aber es ist klar, dass  dialog nicht anpassen können. So hoffen Sie auf etwas besser
Zuerst sehen Sie ein Beispiel
modal-example1.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Modal 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>
Unten ist es die Struktur eines   Modal. Das Element  div.modal-content ist der Ort, wofür Sie die Sorge haben. Es fasst 3 Regionen Header, Body & Footer um und Sie können auf allen 3 Regionen anpassen können.
Modal 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>
Das Attribut Die Bezeichnung
data-backdrop Das Attribut hat 2 Werte true oder static. Das Default ist true, d.h der Benutzer kann auf die Background klicken um Modal zu schließen.
data-keyboard Das Attribut hat 2 Werte true oder false. Das Default ist false, wenn es true ist, kann der Benutzer durch Klicken auf ESC Modal schließen.
aria-labelledby Das Attribut vom HTML5
aria-hidden Das Attribut vom HTML5
Die Klasse  .fade erlaubt Sie, die Auswirkungen zu erstellen wenn das Modal anzeigt oder versteckt.
.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>
Zum Beispiel: Ein  Modal ohne die Enthaltung von Button   "X" (in die oben rechte Echte vom  Modal gesehen).
Modal 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- Modal & jQuery

Sie können  JQuery verwenden um mit  Modal zu interaktieren, z. B  Modal anzeigen oder verstecken.
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
Oder voller:

$('#myModal').modal(options);

// Example:

var options = {
  'backdrop' : 'static',
  'keyboard' : true,
  'show' : true,
  'focus' : false
}
Die Option Die Bezeichnung
backdrop Die Option hat 2 Werte true oder static. Das Default ist true, d.h der Benutzer kann auf den Hintergrund um Modal zu schließen.
keyboard Die Option hat 2 Werte true oder false. Das Default ist false, wenn es true ist, kann der Benutzer Modal durch Klicken auf  ESC schließen.
show Die Option hat 2 Werte  true oder false. Es wird benutzt um Modal anzuzeigen oder zu verstecken.
focus Die Option hat 2 Werte true oder false, Das Default ist false. Wenn es true ist, wird Modal bei der Erstellung fokusiert.

3- Das Event vom Modal

Einige Events werden geworfen (fired) wenn  Modal öffnet oder schließt. Und Sie können diese Event etwas tun machen. Benutzen Sie die Methode  "on" vom  jQuery um das Event mit der Behandlungsfunktion zu verbinden
Das Event Die Bezeichnung
show.bs.modal Das Event wird geworfen (fired) sofort bevor Modal anzeigt.
shown.bs.modal Das Event wird geworfen sofort nachdem Modal anzeigt.
hide.bs.modal Das Event wird geworfen sofort bevor Modal versteckt wird
hidden.bs.modal Das Event wird geworfen sofort nachdem Modal versteckt wird.
Sie können ein der oben Events wie folgend behandeln
$('#myModal').on('shown.bs.modal', function (e) {
  alert('Modal is successfully shown!');
});

View more Tutorials: