Modales Bootstrap -Plugin
Das Modal-Plugin
Das Modal-Plugin ist ein Dialogfeld/Popup-Fenster, das oben auf der aktuellen Seite angezeigt wird:
Tipp: Plugins können einzeln (unter Verwendung der individuellen „modal.js“-Datei von Bootstrap) oder alle auf einmal (unter Verwendung von „bootstrap.js“ oder „bootstrap.min.js“) eingebunden werden.
So erstellen Sie ein Modal
Das folgende Beispiel zeigt, wie ein einfaches Modal erstellt wird:
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>
Beispiel erklärt
Der „Trigger“-Teil:
Um das modale Fenster auszulösen, müssen Sie eine Schaltfläche oder einen Link verwenden.
Fügen Sie dann die beiden data-*-Attribute hinzu:
data-toggle="modal"öffnet das modale Fensterdata-target="#myModal"zeigt auf die ID des Modals
Der "modale" Teil:
Das übergeordnete <div>Element des Modals muss eine ID haben, die mit dem Wert des data-target-Attributs identisch ist, das zum Auslösen des Modals verwendet wird ("myModal").
Die .modalKlasse identifiziert den Inhalt von <div>als Modal und fokussiert darauf.
Die .fadeKlasse fügt einen Übergangseffekt hinzu, der das Modal ein- und ausblendet. Entfernen Sie diese Klasse, wenn Sie diesen Effekt nicht wünschen.
Das Attribut role="dialog"verbessert die Zugänglichkeit für Personen, die Screenreader verwenden.
Die .modal-dialogKlasse legt die richtige Breite und den Rand des Modals fest.
Der Teil "Modaler Inhalt":
Das <div>with class="modal-content" gestaltet das Modal (Rand, Hintergrundfarbe usw.). <div>Fügen Sie darin die Kopf-, Haupt- und Fußzeile des Modals hinzu.
Die .modal-headerKlasse wird verwendet, um den Stil für die Kopfzeile des Modals zu definieren. Das <button>Innere der Kopfzeile hat ein data-dismiss="modal"Attribut, das das Modal schließt, wenn Sie darauf klicken. Die .closeKlasse gestaltet die Schließen-Schaltfläche und die .modal-titleKlasse gestaltet die Kopfzeile mit der richtigen Zeilenhöhe.
Die .modal-bodyKlasse wird verwendet, um den Stil für den Hauptteil des Modals zu definieren. Fügen Sie hier ein beliebiges HTML-Markup hinzu; Absätze, Bilder, Videos usw.
Die .modal-footerKlasse wird verwendet, um den Stil für die Fußzeile des Modals zu definieren. Beachten Sie, dass dieser Bereich standardmäßig rechts ausgerichtet ist.
Modale Größe
Ändern Sie die Größe des Modals, indem Sie die .modal-sm
Klasse für kleine Modale oder die .modal-lgKlasse für große Modale hinzufügen.
Fügen Sie die Größenklasse dem <div>Element mit class hinzu .modal-dialog:
Kleines Modal
<div class="modal-dialog modal-sm">
Großes Modal
<div class="modal-dialog modal-lg">
Modale sind standardmäßig mittelgroß.
Vollständige Bootstrap-Modalreferenz
Eine vollständige Referenz aller modalen Optionen, Methoden und Ereignisse finden Sie in unserer Bootstrap JS Modal Reference .