Modaal
Gebruik de modale JavaScript-plug-in van Bootstrap om dialoogvensters aan uw site toe te voegen voor lightboxes, gebruikersmeldingen of volledig aangepaste inhoud.
Hoe het werkt
Voordat u aan de slag gaat met de modale component van Bootstrap, moet u het volgende lezen, aangezien onze menu-opties onlangs zijn gewijzigd.
- Modals zijn gebouwd met HTML, CSS en JavaScript. Ze worden over al het andere in het document gepositioneerd en verwijderen scroll uit de
<body>
zodat in plaats daarvan modale inhoud schuift. - Als u op de modale "achtergrond" klikt, wordt de modal automatisch gesloten.
- Bootstrap ondersteunt slechts één modaal venster tegelijk. Geneste modaliteiten worden niet ondersteund omdat we denken dat dit een slechte gebruikerservaring is.
- Modals gebruiken
position: fixed
, wat soms een beetje bijzonder kan zijn over de weergave ervan. Plaats waar mogelijk uw modale HTML op een positie op het hoogste niveau om mogelijke interferentie van andere elementen te voorkomen. U zult waarschijnlijk problemen tegenkomen bij het nesten van een.modal
in een ander vast element. - Nogmaals, vanwege
position: fixed
, zijn er enkele kanttekeningen bij het gebruik van modals op mobiele apparaten. Zie onze browserondersteuningsdocumenten voor details. - Vanwege de manier waarop HTML5 de semantiek definieert, heeft het
autofocus
HTML-attribuut geen effect in Bootstrap-modaliteiten. Gebruik wat aangepast JavaScript om hetzelfde effect te bereiken:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
mediaquery. Zie het
gedeelte over beperkte beweging van onze toegankelijkheidsdocumentatie .
Blijf lezen voor demo's en gebruiksrichtlijnen.
Voorbeelden
Modale componenten
Hieronder staat een statisch modaal voorbeeld (wat betekent dat het is position
en display
is overschreven). Inbegrepen zijn de modale koptekst, modale hoofdtekst (vereist voor padding
) en modale voettekst (optioneel). We vragen u waar mogelijk modale koppen met afwijzingsacties op te nemen, of een andere expliciete afwijzingsactie op te geven.
<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 demonstratie
Schakel een werkende modale demo in door op de onderstaande knop te klikken. Het schuift naar beneden en verdwijnt in beeld vanaf de bovenkant van de pagina.
<!-- 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>
Statische achtergrond
Als achtergrond is ingesteld op statisch, wordt de modal niet gesloten als er buiten wordt geklikt. Klik op de onderstaande knop om het te proberen.
<!-- 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>
Door lange inhoud scrollen
Wanneer modals te lang worden voor de viewport of het apparaat van de gebruiker, scrollen ze onafhankelijk van de pagina zelf. Probeer de demo hieronder om te zien wat we bedoelen.
U kunt ook een schuifbare modal maken waarmee u door de modale body kunt scrollen door toe te voegen .modal-dialog-scrollable
aan .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Verticaal gecentreerd
Toevoegen .modal-dialog-centered
aan .modal-dialog
om de modal verticaal te centreren.
<!-- 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>
Knopinfo en popovers
Tooltips en popovers kunnen indien nodig in modals worden geplaatst. Wanneer modals zijn gesloten, worden alle tooltips en popovers binnen ook automatisch gesloten.
<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>
Het raster gebruiken
Gebruik het Bootstrap-rastersysteem binnen een modaal door te nesten .container-fluid
in het .modal-body
. Gebruik dan de normale rastersysteemklassen zoals u dat ergens anders zou doen.
<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>
Variërende modale inhoud
Heb je een aantal knoppen die allemaal hetzelfde modaal activeren met een iets andere inhoud? Gebruik event.relatedTarget
en HTML- data-bs-*
attributen om de inhoud van de modal te variëren, afhankelijk van op welke knop is geklikt.
Hieronder is een live demo gevolgd door voorbeeld HTML en JavaScript. Lees voor meer informatie de documenten over modale gebeurtenissen voor meer informatie over 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
})
Schakelen tussen modaliteiten
Schakel tussen meerdere modals met een slimme plaatsing van de data-bs-target
en data-bs-toggle
attributen. U kunt bijvoorbeeld een modaal voor het opnieuw instellen van een wachtwoord wijzigen vanuit een reeds geopende aanmeldingsmodaliteit. Houd er rekening mee dat meerdere modals niet tegelijkertijd open kunnen zijn - deze methode schakelt eenvoudig tussen twee afzonderlijke modals.
<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">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">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>
Animatie wijzigen
De $modal-fade-transform
variabele bepaalt de transformatiestatus van .modal-dialog
vóór de modale fade-in-animatie, de $modal-show-transform
variabele bepaalt de transformatie van .modal-dialog
aan het einde van de modale fade-in-animatie.
Als u bijvoorbeeld een inzoomanimatie wilt, kunt u instellen $modal-fade-transform: scale(.8)
.
Animatie verwijderen
Voor modals die gewoon verschijnen in plaats van vervagen om te bekijken, verwijdert u de .fade
klasse uit uw modale opmaak.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dynamische hoogten
Als de hoogte van een modal verandert terwijl deze open is, moet u bellen myModal.handleUpdate()
om de positie van de modal opnieuw aan te passen voor het geval er een schuifbalk verschijnt.
Toegankelijkheid
Zorg ervoor dat u aria-labelledby="..."
, verwijzend naar de modale titel, toevoegt aan .modal
. Bovendien kunt u een beschrijving van uw modale dialoog geven met aria-describedby
op .modal
. Merk op dat u niets hoeft toe te voegen role="dialog"
, omdat we het al toevoegen via JavaScript.
YouTube-video's insluiten
Voor het insluiten van YouTube-video's in modals is extra JavaScript vereist dat niet in Bootstrap zit om het afspelen automatisch te stoppen en meer. Zie deze nuttige Stack Overflow-post voor meer informatie.
Optionele maten
Modals hebben drie optionele maten, beschikbaar via modificatieklassen die op een .modal-dialog
. Deze formaten treden in werking bij bepaalde breekpunten om horizontale schuifbalken op smallere kijkvensters te vermijden.
Maat | Klas | Modale maximale breedte |
---|---|---|
Klein | .modal-sm |
300px |
Standaard | Geen | 500px |
Groot | .modal-lg |
800px |
Extra groot | .modal-xl |
1140px |
Onze standaard modale klasse zonder modificatie vormt de "middelgrote" modal.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Modaal op volledig scherm
Een andere overschrijving is de optie om een modaal op te roepen dat de gebruikersviewport dekt, beschikbaar via modificatieklassen die op een .modal-dialog
.
Klas | Beschikbaarheid |
---|---|
.modal-fullscreen |
Altijd |
.modal-fullscreen-sm-down |
Onderstaand576px |
.modal-fullscreen-md-down |
Onderstaand768px |
.modal-fullscreen-lg-down |
Onderstaand992px |
.modal-fullscreen-xl-down |
Onderstaand1200px |
.modal-fullscreen-xxl-down |
Onderstaand1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Variabelen
$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);
Lus
Responsieve fullscreen modals worden gegenereerd via de $breakpoints
kaart en een lus in 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);
}
}
}
}
Gebruik
De modale plug-in schakelt uw verborgen inhoud op aanvraag in, via gegevensattributen of JavaScript. Het heft ook het standaard scrollgedrag op en genereert een .modal-backdrop
om een klikgebied te bieden voor het negeren van getoonde modals wanneer buiten het modale geklikt wordt.
Via gegevensattributen
Schakelaar
Activeer een modaal zonder JavaScript te schrijven. Stel data-bs-toggle="modal"
in op een controller-element, zoals een knop, samen met een data-bs-target="#foo"
of href="#foo"
om een specifieke modaal te targeten om te schakelen.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Afwijzen
Ontslag kan worden bereikt met het data
kenmerk op een knop binnen de modal , zoals hieronder wordt aangetoond:
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
of op een knop buiten de modal met behulp van de data-bs-target
onderstaande afbeelding:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Via JavaScript
Maak een modaal met een enkele regel JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Opties
Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-bs-
, zoals in data-bs-backdrop=""
.
Naam | Type | Standaard | Beschrijving |
---|---|---|---|
backdrop |
boolean of de string'static' |
true |
Bevat een modaal-achtergrondelement. U kunt ook een achtergrond opgeven static die de modal niet sluit bij klikken. |
keyboard |
booleaans | true |
Sluit de modal wanneer de escape-toets wordt ingedrukt |
focus |
booleaans | true |
Legt de focus op het modale wanneer geïnitialiseerd. |
Methoden:
Asynchrone methoden en overgangen
Alle API-methoden zijn asynchroon en starten een transitie . Ze keren terug naar de beller zodra de overgang is gestart maar voordat deze eindigt . Bovendien wordt een methodeaanroep op een overgangscomponent genegeerd .
Passende opties
Activeert uw inhoud als modaal. Accepteert een optionele optie object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
schakelaar
Schakelt handmatig een modaal in. Keert terug naar de beller voordat de modal daadwerkelijk is getoond of verborgen (dwz voordat de shown.bs.modal
of hidden.bs.modal
-gebeurtenis plaatsvindt).
myModal.toggle()
show
Opent handmatig een modaal. Keert terug naar de beller voordat de modal daadwerkelijk is getoond (dwz voordat de shown.bs.modal
gebeurtenis plaatsvindt).
myModal.show()
U kunt ook een DOM-element doorgeven als argument dat kan worden ontvangen in de modale gebeurtenissen (als de relatedTarget
eigenschap).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
verbergen
Verbergt handmatig een modaal. Keert terug naar de beller voordat de modal daadwerkelijk is verborgen (dwz voordat de hidden.bs.modal
gebeurtenis plaatsvindt).
myModal.hide()
handvatUpdate
Pas de positie van de modal handmatig aan als de hoogte van een modal verandert terwijl deze open is (dwz als er een schuifbalk verschijnt).
myModal.handleUpdate()
weggooien
Vernietigt de modal van een element. (Verwijdert opgeslagen gegevens op het DOM-element)
myModal.dispose()
getInstance
Statische methode waarmee u de modale instantie kunt krijgen die is gekoppeld aan een DOM-element
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Statische methode waarmee u de modale instantie kunt krijgen die is gekoppeld aan een DOM-element, of een nieuwe kunt maken voor het geval deze niet is geïnitialiseerd
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Evenementen
De modale klasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op modale functionaliteit. Alle modale gebeurtenissen worden afgevuurd op de modale zelf (dwz op de <div class="modal">
).
Evenementtype | Beschrijving |
---|---|
show.bs.modal |
Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de show instantiemethode wordt aangeroepen. Indien veroorzaakt door een klik, is het aangeklikte element beschikbaar als de relatedTarget eigenschap van de gebeurtenis. |
shown.bs.modal |
Deze gebeurtenis wordt geactiveerd wanneer de modal zichtbaar is gemaakt voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid). Indien veroorzaakt door een klik, is het aangeklikte element beschikbaar als de relatedTarget eigenschap van de gebeurtenis. |
hide.bs.modal |
Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hide instantiemethode is aangeroepen. |
hidden.bs.modal |
Deze gebeurtenis wordt geactiveerd wanneer de modal klaar is met verborgen zijn voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid). |
hidePrevented.bs.modal |
Deze gebeurtenis wordt geactiveerd wanneer de modal wordt weergegeven, de achtergrond is static en een klik buiten de modal of een Escape-toets wordt ingedrukt met de toetsenbordoptie of data-bs-keyboard ingesteld op false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})