codestory

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 AttributDie Bezeichnung
data-backdropDas 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-keyboardDas 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-labelledbyDas Attribut vom HTML5
aria-hiddenDas 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 OptionDie Bezeichnung
backdropDie Option hat 2 Werte true oder static. Das Default ist true, d.h der Benutzer kann auf den Hintergrund um Modal zu schließen.
keyboardDie 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.
showDie Option hat 2 Werte  true oder false. Es wird benutzt um Modal anzuzeigen oder zu verstecken.
focusDie 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 EventDie Bezeichnung
show.bs.modalDas Event wird geworfen (fired) sofort bevor Modal anzeigt.
shown.bs.modalDas Event wird geworfen sofort nachdem Modal anzeigt.
hide.bs.modalDas Event wird geworfen sofort bevor Modal versteckt wird
hidden.bs.modalDas 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: