Der Modal-Plugin
Der Modal-Plugin ist ein Dialogfeld / Popup-Fenster, das oben auf der aktuellen Seite angezeigt wird:
Tipp: Plugins können einzeln aufgenommen werden (Bootstrap des Individuums mit "modal.js" Datei) oder alle auf einmal (mit "bootstrap.js" oder "bootstrap.min.js" ).
So erstellen Sie ein Modal
Das folgende Beispiel zeigt, wie eine grundlegende modal zu erstellen:
Beispiel
<!-- Trigger the modal with a button -->
<button type="button" class="btn
btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Modal -->
<div id="myModal"
class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal
content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Versuch es selber " Beispiel erklärt
Der "Trigger" Teil:
Um das modale Fenster auslösen, müssen Sie auf eine Schaltfläche oder einen Link zu verwenden.
Dann sind die beiden data-* Attribute:
-
data-toggle="modal"öffnet sich das Fenster modal -
data-target="#myModal"verweist auf die ID des Modal
Die "Modal" Teil:
Die übergeordnete <div> des modalen muss eine ID, die gleich dem Wert der Daten-Zielattribut verwendet , um das modale auszulösen ("myModal") .
Die .modal Klasse identifiziert den Inhalt von <div> als modaler und bringt Fokus darauf.
Die .fade Klasse fügt einen Übergangseffekt, der die modal ein- und ausblendet. Entfernen Sie diese Klasse, wenn Sie diesen Effekt nicht wollen.
Das Attribut role="dialog" verbessert für Menschen Zugänglichkeit Leser mit Bildschirm.
Der .modal-dialog - Klasse setzt die richtige Breite und Rand des modal.
Der "Modal Inhalt" Teil:
Die <div> mit class="modal-content " Stile der modal (Grenze, Hintergrundfarbe, etc.). Innerhalb dieses <div> , die Header, Body und Footer modale hinzufügen.
Die .modal-header - Klasse wird verwendet , um den Stil für den Header des modalen zu definieren. Die <button> im Header hat eine data-dismiss="modal" Attribut , das die modale schließt , wenn Sie darauf klicken. Die .close Klasse Stile der Schließen - Schaltfläche und die .modal-title Klasse Stile der Header mit einer richtigen line-height.
Der .modal-body - Klasse wird verwendet , um den Stil für den Körper des modalen zu definieren. Fügen Sie alle HTML-Markup hier; Absätze, Bilder, Videos etc.
Die .modal-footer - Klasse wird verwendet , um den Stil für die Fußzeile des modalen zu definieren. Beachten Sie, dass dieser Bereich Recht standardmäßig ausgerichtet ist.
Modal Größe
Ändern Sie die Größe des modalen durch Zugabe des .modal-sm - Klasse für kleine Modalverben oder .modal-lg - Klasse für große Modalverben.
Fügen Sie die Größenklasse mit dem <div> Element mit Klasse .modal-dialog :
 | Standardmäßig sind modals mittelgroß. |
|---|
Füllen Sie Bootstrap Modal Referenz
Eine vollständige Referenz aller modalen Optionen, Methoden und Ereignisse finden Sie auf unserer Bootstrap JS Modal Referenz .