Modal
Verwenden Sie das modale JavaScript-Plugin von Bootstrap, um Ihrer Website Dialoge für Leuchtkästen, Benutzerbenachrichtigungen oder vollständig benutzerdefinierte Inhalte hinzuzufügen.
Wie es funktioniert
Bevor Sie mit der modalen Komponente von Bootstrap beginnen, lesen Sie unbedingt das Folgende, da sich unsere Menüoptionen kürzlich geändert haben.
- Modale werden mit HTML, CSS und JavaScript erstellt. Sie werden über allem anderen im Dokument positioniert und entfernen den Bildlauf aus dem
<body>
, sodass der modale Inhalt stattdessen gescrollt wird. - Durch Klicken auf den modalen „Hintergrund“ wird das Modal automatisch geschlossen.
- Bootstrap unterstützt jeweils nur ein modales Fenster. Verschachtelte Modale werden nicht unterstützt, da wir glauben, dass sie eine schlechte Benutzererfahrung darstellen.
- Modale verwenden
position: fixed
, was manchmal etwas speziell in Bezug auf die Wiedergabe sein kann. Platzieren Sie Ihr modales HTML nach Möglichkeit an einer Position der obersten Ebene, um potenzielle Störungen durch andere Elemente zu vermeiden. Sie werden wahrscheinlich auf Probleme stoßen, wenn Sie ein.modal
in ein anderes festes Element verschachteln. - Auch
position: fixed
hier gibt es aufgrund von einige Vorbehalte bei der Verwendung von Modals auf Mobilgeräten. Weitere Informationen finden Sie in unseren Browser-Support-Dokumenten . - Aufgrund dessen, wie HTML5 seine Semantik definiert, hat das
autofocus
HTML-Attribut keine Wirkung in Bootstrap-Modalen. Um den gleichen Effekt zu erzielen, verwenden Sie ein benutzerdefiniertes JavaScript:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
Medienanfrage. Weitere Informationen finden Sie im Abschnitt zur
reduzierten Bewegung in unserer Dokumentation zur Barrierefreiheit .
Lesen Sie weiter für Demos und Nutzungsrichtlinien.
Beispiele
Modale Komponenten
Unten ist ein statisches modales Beispiel (was bedeutet , dass position
und display
überschrieben wurden). Enthalten sind die modale Kopfzeile, der modale Hauptteil (erforderlich für padding
) und die modale Fußzeile (optional). Wir bitten Sie, wann immer möglich modale Kopfzeilen mit Ablehnungsaktionen einzuschließen oder eine andere ausdrückliche Ablehnungsaktion bereitzustellen.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Live-Demo
Schalten Sie eine funktionierende modale Demo um, indem Sie auf die Schaltfläche unten klicken. Es gleitet nach unten und wird vom oberen Rand der Seite eingeblendet.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Statischer Hintergrund
Wenn der Hintergrund auf statisch eingestellt ist, wird das Modal nicht geschlossen, wenn Sie außerhalb davon klicken. Klicken Sie auf die Schaltfläche unten, um es zu versuchen.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Scrollen von langen Inhalten
Wenn Modale für den Darstellungsbereich oder das Gerät des Benutzers zu lang werden, scrollen sie unabhängig von der Seite selbst. Probieren Sie die Demo unten aus, um zu sehen, was wir meinen.
Sie können auch ein scrollbares Modal erstellen, das es ermöglicht, den Modalkörper zu scrollen, indem Sie .modal-dialog-scrollable
zu hinzufügen .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Vertikal zentriert
Fügen Sie hinzu .modal-dialog-centered
, .modal-dialog
um das Modal vertikal zu zentrieren.
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
Tooltips und Popovers
Tooltips und Popovers können nach Bedarf innerhalb von Modals platziert werden. Wenn Modale geschlossen werden, werden auch alle QuickInfos und Popovers darin automatisch ausgeblendet.
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
Verwenden des Rasters
Verwenden Sie das Bootstrap-Rastersystem innerhalb eines Modals, indem Sie es .container-fluid
innerhalb der .modal-body
. Verwenden Sie dann die normalen Rastersystemklassen wie überall sonst.
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
Variierender modaler Inhalt
Haben Sie eine Reihe von Schaltflächen, die alle dasselbe Modal mit leicht unterschiedlichen Inhalten auslösen? Verwenden Sie die HTML- Attributeevent.relatedTarget
und , um den Inhalt des Modals abhängig davon zu variieren, auf welche Schaltfläche geklickt wurde.data-bs-*
Unten finden Sie eine Live-Demo, gefolgt von HTML- und JavaScript-Beispielen. Weitere Informationen finden Sie in der Dokumentation zu modalen Ereignissen für Details zu relatedTarget
.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
Wechseln Sie zwischen den Modalen
Schalten Sie mit einer cleveren Platzierung der Attribute data-bs-target
und zwischen mehreren Modalen um . data-bs-toggle
Beispielsweise könnten Sie ein Modal zum Zurücksetzen des Passworts innerhalb eines bereits geöffneten Anmeldemodals umschalten. Bitte beachten Sie, dass nicht mehrere Modale gleichzeitig geöffnet sein können – diese Methode schaltet einfach zwischen zwei separaten Modalen um.
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
Animation ändern
Die $modal-fade-transform
Variable bestimmt den Transformationszustand von .modal-dialog
vor der modalen Einblendanimation, die $modal-show-transform
Variable bestimmt die Transformation von .modal-dialog
am Ende der modalen Einblendanimation.
Wenn Sie zum Beispiel eine Zoom-In-Animation wünschen, können Sie $modal-fade-transform: scale(.8)
.
Animation entfernen
Entfernen Sie für Modale, die einfach angezeigt und nicht eingeblendet werden, die .fade
Klasse aus Ihrem modalen Markup.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dynamische Höhen
Wenn sich die Höhe eines Modals ändert, während es geöffnet ist, sollten Sie aufrufen myModal.handleUpdate()
, um die Position des Modals neu anzupassen, falls eine Bildlaufleiste angezeigt wird.
Barrierefreiheit
Stellen Sie sicher, dass Sie aria-labelledby="..."
, unter Bezugnahme auf den modalen Titel, zu hinzufügen .modal
. aria-describedby
Zusätzlich können Sie mit on eine Beschreibung Ihres modalen Dialogs angeben .modal
. Beachten Sie, dass Sie es nicht hinzufügen müssen, role="dialog"
da wir es bereits über JavaScript hinzufügen.
YouTube-Videos einbetten
Das Einbetten von YouTube-Videos in Modale erfordert zusätzliches JavaScript, das nicht in Bootstrap enthalten ist, um die Wiedergabe automatisch zu stoppen und mehr. Weitere Informationen finden Sie in diesem hilfreichen Stack Overflow-Beitrag .
Optionale Größen
Modale haben drei optionale Größen, die über Modifikatorklassen verfügbar sind, die auf einer .modal-dialog
. Diese Größen treten an bestimmten Haltepunkten ein, um horizontale Bildlaufleisten in schmaleren Ansichtsfenstern zu vermeiden.
Größe | Klasse | Modale maximale Breite |
---|---|---|
Klein | .modal-sm |
300px |
Standard | Keiner | 500px |
Groß | .modal-lg |
800px |
Extra groß | .modal-xl |
1140px |
Unser Standardmodal ohne Modifikatorklasse bildet das Modal „mittlerer“ Größe.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Vollbildmodus
Eine weitere Überschreibung ist die Option, ein Modal anzuzeigen, das den Benutzeransichtsbereich abdeckt, verfügbar über Modifikatorklassen, die auf einer .modal-dialog
.
Klasse | Verfügbarkeit |
---|---|
.modal-fullscreen |
Stets |
.modal-fullscreen-sm-down |
Unter576px |
.modal-fullscreen-md-down |
Unter768px |
.modal-fullscreen-lg-down |
Unter992px |
.modal-fullscreen-xl-down |
Unter1200px |
.modal-fullscreen-xxl-down |
Unter1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Variablen
$modal-inner-padding: $spacer;
$modal-footer-margin-between: .5rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: $box-shadow-sm;
$modal-content-box-shadow-sm-up: $box-shadow;
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-border-width;
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;
$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform .3s ease-out;
$modal-scale-transform: scale(1.02);
Schleife
Responsive Vollbildmodalitäten werden über die $breakpoints
Karte und eine Schleife in generiert scss/_modal.scss
.
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
Verwendungszweck
Das Modal-Plugin schaltet Ihre versteckten Inhalte bei Bedarf über Datenattribute oder JavaScript um. Es überschreibt auch das Standard-Bildlaufverhalten und generiert ein .modal-backdrop
, um einen Klickbereich zum Verwerfen angezeigter Modale bereitzustellen, wenn außerhalb des Modals geklickt wird.
Über Datenattribute
Aktivieren Sie ein Modal, ohne JavaScript zu schreiben. Setzen Sie data-bs-toggle="modal"
es auf ein Controller-Element, wie eine Schaltfläche, zusammen mit einem data-bs-target="#foo"
oder href="#foo"
, um ein bestimmtes Modal zum Umschalten auszuwählen.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Über JavaScript
Erstellen Sie ein Modal mit einer einzigen JavaScript-Zeile:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Optionen
Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-bs-
, wie in data-bs-backdrop=""
.
Name | Typ | Standard | Beschreibung |
---|---|---|---|
backdrop |
boolean oder die Zeichenfolge'static' |
true |
Enthält ein modales Hintergrundelement. Geben Sie alternativ static einen Hintergrund an, der das Modal beim Klicken nicht schließt. |
keyboard |
boolesch | true |
Schließt das Modal, wenn die Escape-Taste gedrückt wird |
focus |
boolesch | true |
Legt bei der Initialisierung den Fokus auf das Modal. |
Methoden
Asynchrone Methoden und Übergänge
Alle API-Methoden sind asynchron und starten einen Übergang . Sie kehren zum Aufrufer zurück, sobald der Übergang gestartet wird, aber bevor er endet . Außerdem wird ein Methodenaufruf einer Übergangskomponente ignoriert .
Weitere Informationen finden Sie in unserer JavaScript-Dokumentation .
Passing-Optionen
Aktiviert Ihren Inhalt als Modal. Akzeptiert optionale Optionen object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
Umschalten
Schaltet ein Modal manuell um. Gibt an den Aufrufer zurück, bevor das Modal tatsächlich angezeigt oder ausgeblendet wurde (dh bevor das shown.bs.modal
oder hidden.bs.modal
-Ereignis eintritt).
myModal.toggle()
Show
Öffnet manuell ein Modal. Kehrt zum Aufrufer zurück, bevor das Modal tatsächlich gezeigt wurde (dh bevor das shown.bs.modal
Ereignis eintritt).
myModal.show()
Außerdem können Sie ein DOM-Element als Argument übergeben, das in den modalen Ereignissen (als relatedTarget
Eigenschaft) empfangen werden kann.
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
ausblenden
Blendet ein Modal manuell aus. Gibt an den Aufrufer zurück, bevor das Modal tatsächlich ausgeblendet wurde (dh bevor das hidden.bs.modal
Ereignis eintritt).
myModal.hide()
handleUpdate
Passen Sie die Position des Modals manuell an, wenn sich die Höhe eines Modals ändert, während es geöffnet ist (dh falls eine Bildlaufleiste angezeigt wird).
myModal.handleUpdate()
entsorgen
Zerstört das Modal eines Elements. (Entfernt gespeicherte Daten auf dem DOM-Element)
myModal.dispose()
bekomme Instanz
Statische Methode, mit der Sie die modale Instanz abrufen können, die einem DOM-Element zugeordnet ist
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Statische Methode, mit der Sie die mit einem DOM-Element verknüpfte modale Instanz abrufen oder eine neue erstellen können, falls sie nicht initialisiert wurde
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Veranstaltungen
Die modale Klasse von Bootstrap macht einige Ereignisse verfügbar, um sich in die modale Funktionalität einzuklinken. Alle modalen Ereignisse werden am Modal selbst (dh am <div class="modal">
) ausgelöst.
Ereignistyp | Beschreibung |
---|---|
show.bs.modal |
Dieses Ereignis wird sofort ausgelöst, wenn die show Instanzmethode aufgerufen wird. Wenn es durch einen Klick verursacht wurde, ist das angeklickte Element als relatedTarget Eigenschaft des Ereignisses verfügbar. |
shown.bs.modal |
Dieses Ereignis wird ausgelöst, wenn das Modal für den Benutzer sichtbar gemacht wurde (wartet auf den Abschluss der CSS-Übergänge). Wenn es durch einen Klick verursacht wurde, ist das angeklickte Element als relatedTarget Eigenschaft des Ereignisses verfügbar. |
hide.bs.modal |
Dieses Ereignis wird sofort ausgelöst, wenn die hide Instanzmethode aufgerufen wurde. |
hidden.bs.modal |
Dieses Ereignis wird ausgelöst, wenn das Modal vollständig vor dem Benutzer ausgeblendet wurde (wartet auf den Abschluss der CSS-Übergänge). |
hidePrevented.bs.modal |
Dieses Ereignis wird ausgelöst, wenn das Modal angezeigt wird, sein Hintergrund ist static und ein Klick außerhalb des Modals oder ein Drücken der Escape-Taste mit der Tastaturoption oder data-bs-keyboard auf gesetzt ausgeführt wird false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})