Bootstrap-Modale

Bootstrap-Modale sind im Grunde genommen Dialogfelder, die mit einem benutzerdefinierten jQuery-Plugin erstellt werden. Modalitäten sind optimierte Dialogaufforderungen, die Inhalte von einer externen Quelle enthalten, um dem Benutzer wichtige Informationen anzuzeigen, damit er die erforderlichen Maßnahmen ergreifen kann, bevor er fortfährt. Ein Modal wird oft als untergeordnetes Fenster bezeichnet, das als Fenster zum Anzeigen von Diashows, Benutzeranmeldungen, Werbung usw. verwendet wird, ohne das übergeordnete Fenster zu verlassen. Modale werden häufig verwendet, um Benutzer in Situationen wie der Bestätigung zu warnen, bevor sie Aktionen wie das Speichern oder Löschen wichtiger Daten ausführen.

lesen Sie auch:

  • Bootstrap-Setup
  • Bootstrap-Typografie

Wir können mit Bootstrap ganz einfach flexible Dialogfelder erstellen, indem wir die verwenden .modal Klasse zusammen mit div-Element. Das folgende Beispiel zeigt, wie Bootstrap-Modals auf unserer Webseite verwendet werden. Wenn Sie Fragen dazu haben Bootstrap-Modalenschreiben Sie es bitte in den Kommentarbereich.

Statischer Bootstrap-Modal

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div  >
<h2>Static Modal</h2>
<button   data-toggle="modal" data-target="#DemoModal">Click to Launch Demo Modal</button>
<div   id="DemoModal">
   <div  >
      <div  >
         <div  >
            <button type="button"   data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4  >My Modal</h4>
         </div>
         <div  >
            <p>Are you sure you want to delete this item?</p>
         </div>
         <div  >
            <button type="button"   data-dismiss="modal">Yes</button>
            <button type="button"   data-dismiss="modal">No</button>
         </div>
      </div>
   </div>
</div>
</div>
</body>
</html>

Wie im obigen Skript gezeigt, haben wir zwei Klassen verwendet. Erstens ist .modal was das div-Element als modal definiert. Zweitens ist .verblassen Dies führt dazu, dass der Inhalt ein- und ausgeblendet wird, wenn der Modalmodus umgeschaltet wird. Wir können im

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen