Bootstrap-4 -Modal
Bootstrap-4-Modal
Die modale Komponente ist ein Dialogfeld/Popup-Fenster, das über der aktuellen Seite angezeigt wird:
So erstellen Sie ein Modal
Das folgende Beispiel zeigt, wie ein einfaches Modal erstellt wird:
Beispiel
<!-- 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">×</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>
Animation hinzufügen
Verwenden Sie die .fadeKlasse, um beim Öffnen und Schließen des Modals einen Fading-Effekt hinzuzufügen:
Beispiel
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
Modale Größe
Ändern Sie die Größe des Modals, indem Sie die .modal-sm
Klasse für kleine Modale, die .modal-lgKlasse für große Modale oder .modal-xlfür extra 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">
Extra großes Modal
<div class="modal-dialog modal-xl">
Modale sind standardmäßig "mittelgroß".
Zentriertes Modal
Zentrieren Sie das Modal vertikal und horizontal innerhalb der Seite mit der .modal-dialog-centered
Klasse:
Beispiel
<div class="modal-dialog modal-dialog-centered">
Scrollendes Modal
Wenn Sie viel Inhalt im Modal haben, wird der Seite eine Bildlaufleiste hinzugefügt. Sehen Sie sich die folgenden Beispiele an, um es zu verstehen:
Beispiel
<div class="modal-dialog">
Es ist jedoch möglich, anstelle der Seite selbst nur innerhalb des Modals zu scrollen, indem Sie Folgendes .modal-dialog-scrollablehinzufügen .modal-dialog:
Beispiel
<div class="modal-dialog modal-dialog-scrollable">
Vollständige Bootstrap-Modalreferenz
Eine vollständige Referenz aller modalen Optionen, Methoden und Ereignisse finden Sie in unserer Bootstrap JS Modal Reference .