Bootstrap 5.2 / Componenten

Modal

Gebruik de JavaScript-modal-plugin van Bootstrap om dialoogvensters aan je site toe te voegen voor lightboxen, gebruikersmeldingen of volledig eigen content.

Hoe het werkt

Lees het volgende voordat je met het modal-component van Bootstrap aan de slag gaat, want onze menu-opties zijn recent gewijzigd.

Modals zijn gebouwd met HTML, CSS en JavaScript. Ze worden boven al het andere in het document geplaatst en halen het scrollen weg bij de <body>, zodat de modal-content in plaats daarvan scrollt.
Klikken op de "backdrop" van de modal sluit de modal automatisch.
Bootstrap ondersteunt maar één modal-venster tegelijk. Geneste modals worden niet ondersteund, omdat wij ze een slechte gebruikerservaring vinden.
Modals gebruiken position: fixed, wat qua weergave soms wat eigenzinnig kan zijn. Plaats je modal-HTML waar mogelijk op het hoogste niveau om mogelijke interferentie van andere elementen te voorkomen. Je loopt waarschijnlijk tegen problemen aan wanneer je een .modal in een ander fixed element nest.
Ook vanwege position: fixed zijn er een aantal kanttekeningen bij het gebruik van modals op mobiele apparaten. Zie onze documentatie over browserondersteuning voor details.
Vanwege de manier waarop HTML5 zijn semantiek definieert, heeft het HTML-attribuut autofocus geen effect in Bootstrap-modals. Gebruik wat eigen JavaScript om hetzelfde effect te bereiken:

const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

Let op

Animaties en overgangen houden rekening met de instelling prefers-reduced-motion. Heeft een bezoeker in het besturingssysteem om minder beweging gevraagd, dan vallen overgangen weg.

Lees verder voor demo's en gebruiksrichtlijnen.

Voorbeelden

Hieronder staat een statisch modal-voorbeeld (dat wil zeggen dat de position en display overschreven zijn). Meegenomen zijn de modal-kop, de modal-body (verplicht voor padding) en de modal-voettekst (optioneel). We vragen je om waar mogelijk modal-koppen met sluitacties op te nemen, of anders een expliciete sluitactie te bieden.

HTML

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal-titel</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Sluiten"></button>
      </div>
      <div class="modal-body">
        <p>Hier komt de tekst van de modal-body.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Sluiten</button>
        <button type="button" class="btn btn-primary">Wijzigingen opslaan</button>
      </div>
    </div>
  </div>
</div>

Let op

In het statische voorbeeld hierboven gebruiken we <h5>, om problemen met de kophiërarchie op de documentatiepagina te voorkomen. Structureel gezien vormt een modal-dialoogvenster echter zijn eigen aparte document/context, dus zou de .modal-title idealiter een <h1> moeten zijn. Zo nodig kun je de lettergrootte-utilities gebruiken om het uiterlijk van de kop te bepalen. Alle volgende live voorbeelden gebruiken deze aanpak.

Live demo

Schakel een werkende modal-demo in door op de knop hieronder te klikken. Hij schuift omlaag en faadt in vanaf de bovenkant van de pagina.

HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Demo-modal openen
</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">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal-titel</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Sluiten"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Sluiten</button>
        <button type="button" class="btn btn-primary">Wijzigingen opslaan</button>
      </div>
    </div>
  </div>
</div>

Statische backdrop

Wanneer de backdrop op static staat, sluit de modal niet wanneer je erbuiten klikt. Klik op de knop hieronder om het te proberen.

HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Modal met statische backdrop openen
</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">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal-titel</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Sluiten"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Sluiten</button>
        <button type="button" class="btn btn-primary">Begrepen</button>
      </div>
    </div>
  </div>
</div>

Lange content scrollen

Wanneer modals te lang worden voor de viewport of het apparaat van de gebruiker, scrollen ze los van de pagina zelf. Probeer de demo hieronder om te zien wat we bedoelen.

Je kunt ook een scrollbare modal maken waarin de modal-body scrollt, door .modal-dialog-scrollable aan .modal-dialog toe te voegen.

HTML

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Verticaal gecentreerd

Voeg .modal-dialog-centered aan .modal-dialog toe om de modal verticaal te centreren.

HTML

<!-- 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 en popovers

Tooltips en popovers kunnen naar behoefte binnen modals worden geplaatst. Wanneer modals gesloten worden, worden eventuele tooltips en popovers erin automatisch ook gesloten.

HTML

<div class="modal-body">
  <h2 class="fs-5">Popover in een modal</h2>
  <p>Deze <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover-titel" data-bs-content="De inhoud van de popover-body wordt in dit attribuut ingesteld.">knop</a> activeert bij klikken een popover.</p>
  <hr>
  <h2 class="fs-5">Tooltips in een modal</h2>
  <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">Deze link</a> en <a href="#" data-bs-toggle="tooltip" title="Tooltip">die link</a> hebben tooltips bij hover.</p>
</div>

Het grid gebruiken

Gebruik het grid-systeem van Bootstrap binnen een modal door .container-fluid in de .modal-body te nesten. Gebruik daarna gewoon de normale grid-systeemklassen, net als elders.

HTML

<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">
        Niveau 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Niveau 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Niveau 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Heb je een reeks knoppen die allemaal dezelfde modal openen met licht afwijkende inhoud? Gebruik event.relatedTarget en HTML-data-bs-*-attributen om de inhoud van de modal te variëren op basis van welke knop er is aangeklikt.

Hieronder staat een live demo, gevolgd door voorbeeld-HTML en -JavaScript. Voor meer informatie: lees de documentatie over modal-gebeurtenissen voor details over relatedTarget.

HTML

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Modal openen voor @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Modal openen voor @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Modal openen voor @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">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Nieuw bericht</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Sluiten"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Ontvanger:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Bericht:</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">Sluiten</button>
        <button type="button" class="btn btn-primary">Bericht versturen</button>
      </div>
    </div>
  </div>
</div>

const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Knop die de modal heeft geopend
  const button = event.relatedTarget
  // Haal informatie uit data-bs-*-attributen
  const recipient = button.getAttribute('data-bs-whatever')
  // Zo nodig kun je hier een AJAX-verzoek starten
  // en het bijwerken in een callback doen.
  //
  // Werk de inhoud van de modal bij.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = `Nieuw bericht aan ${recipient}`
  modalBodyInput.value = recipient
})

Wisselen tussen modals

Wissel tussen meerdere modals met een slimme plaatsing van de attributen data-bs-target en data-bs-toggle. Zo kun je bijvoorbeeld vanuit een al geopende inlog-modal een modal voor wachtwoordherstel openen. Let op: meerdere modals kunnen niet tegelijk open zijn — deze methode wisselt simpelweg tussen twee losse modals.

HTML

<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">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Sluiten"></button>
      </div>
      <div class="modal-body">
        Toon met de knop hieronder een tweede modal en verberg deze.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Tweede modal openen</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">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Sluiten"></button>
      </div>
      <div class="modal-body">
        Verberg deze modal met de knop hieronder en toon de eerste.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Terug naar de eerste</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Eerste modal openen</a>

Animatie wijzigen

De variabele $modal-fade-transform bepaalt de transform-status van .modal-dialog vóór de fade-in-animatie van de modal; de variabele $modal-show-transform bepaalt de transform van .modal-dialog aan het eind van de fade-in-animatie.

Wil je bijvoorbeeld een inzoom-animatie, dan kun je $modal-fade-transform: scale(.8) instellen.

Animatie verwijderen

Wil je modals die gewoon verschijnen in plaats van infaden, verwijder dan de klasse .fade uit je modal-markup.

HTML

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Dynamische hoogtes

Verandert de hoogte van een modal terwijl die open is, roep dan myModal.handleUpdate() aan om de positie van de modal opnieuw af te stemmen, voor het geval er een scrollbalk verschijnt.

Toegankelijkheid

Voeg aria-labelledby="..." toe aan .modal, verwijzend naar de modal-titel. Daarnaast kun je met aria-describedby op .modal een beschrijving van je modal-dialoogvenster meegeven. Let op: je hoeft role="dialog" niet toe te voegen, omdat wij dat al via JavaScript doen.

YouTube-video's insluiten

Het insluiten van YouTube-video's in modals vereist extra JavaScript die niet in Bootstrap zit, om onder meer het afspelen automatisch te stoppen. Zie deze nuttige Stack Overflow-post voor meer informatie.

Optionele formaten

Modals hebben drie optionele formaten, beschikbaar via modifier-klassen die op een .modal-dialog geplaatst worden. Deze formaten treden bij bepaalde breakpoints in werking om horizontale scrollbalken op smallere viewports te voorkomen.

Formaat	Klasse	Max-width van de modal
Small	`.modal-sm`	`300px`
Standaard	Geen	`500px`
Large	`.modal-lg`	`800px`
Extra large	`.modal-xl`	`1140px`

Onze standaardmodal zonder modifier-klasse vormt het "medium" modal-formaat.

HTML

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Nog een override is de mogelijkheid om een modal te openen die de hele viewport van de gebruiker vult, beschikbaar via modifier-klassen die op een .modal-dialog geplaatst worden.

Klasse	Beschikbaarheid
`.modal-fullscreen`	Altijd
`.modal-fullscreen-sm-down`	`576px`
`.modal-fullscreen-md-down`	`768px`
`.modal-fullscreen-lg-down`	`992px`
`.modal-fullscreen-xl-down`	`1200px`
`.modal-fullscreen-xxl-down`	`1400px`

HTML

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken modals nu lokale CSS-variabelen op .modal en .modal-backdrop, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Standaardwaarden: zie scss/_modal.scss in de Bootstrap-broncode.

Sass-variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Loop

Responsieve schermvullende modals worden gegenereerd via de $breakpoints-map en een loop in scss/_modal.scss.

Standaardwaarden: zie scss/_modal.scss in de Bootstrap-broncode.

Gebruik

De modal-plugin schakelt je verborgen content op aanvraag, via data-attributen of JavaScript. Hij overschrijft ook het standaard scrollgedrag en genereert een .modal-backdrop als klikgebied om getoonde modals te sluiten wanneer je buiten de modal klikt.

Via data-attributen

Schakelen

Activeer een modal zonder JavaScript te schrijven. Zet data-bs-toggle="modal" op een bedieningselement, zoals een knop, samen met een data-bs-target="#foo" of href="#foo" om een specifieke modal te schakelen.

HTML

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Modal openen</button>

Sluiten

Klik-om-te-sluiten werkt automatisch via de dismiss data-API, zonder dat je zelf JavaScript hoeft te initialiseren. Gebruik het attribuut data-bs-dismiss="modal" op een knop binnen het component om het te sluiten.

Let op

Hoewel beide manieren om een modal te sluiten worden ondersteund, moet je bedenken dat sluiten van buiten een modal niet overeenkomt met het dialog- (modal-)patroon van de ARIA Authoring Practices Guide. Doe dit op eigen risico.

Via JavaScript

Maak een modal met één regel JavaScript:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// of
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Opties

De meeste plugins kun je aanzetten zonder JavaScript te schrijven, puur met een data-bs-*-attribuut als trigger. Al deze data-attributen zijn genamespaced met bs-, zodat ze niet botsen met andere scripts.

Naam	Type	Standaard	Omschrijving
`backdrop`	boolean, `'static'`	`true`	Voegt een modal-backdrop-element toe. Of geef `static` op voor een backdrop die de modal bij klikken niet sluit.
`focus`	boolean	`true`	Zet de focus bij initialisatie op de modal.
`keyboard`	boolean	`true`	Sluit de modal wanneer op de Escape-toets wordt gedrukt.

Methodes

Gevaar

Deze methode start een overgang. Roep hem niet opnieuw aan zolang de vorige nog bezig is: dat levert onverwacht gedrag op. Wacht op het bijbehorende gebeurtenis voordat je opnieuw aanroept.

Opties meegeven

Activeert je content als modal. Accepteert een optioneel options-object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})

Methode	Omschrijving
`dispose`	Vernietigt de modal van een element. (Verwijdert opgeslagen gegevens van het DOM-element)
`getInstance`	Statische methode waarmee je de modal-instantie kunt ophalen die bij een DOM-element hoort.
`getOrCreateInstance`	Statische methode waarmee je de modal-instantie kunt ophalen die bij een DOM-element hoort, of een nieuwe kunt aanmaken als die nog niet was geïnitialiseerd.
`handleUpdate`	Stemt de positie van de modal handmatig opnieuw af als de hoogte van een modal verandert terwijl die open is (bijv. als er een scrollbalk verschijnt).
`hide`	Verbergt een modal handmatig. Keert terug naar de aanroeper voordat de modal daadwerkelijk verborgen is (dus vóór de gebeurtenis `hidden.bs.modal`).
`show`	Opent een modal handmatig. Keert terug naar de aanroeper voordat de modal daadwerkelijk getoond is (dus vóór de gebeurtenis `shown.bs.modal`). Je kunt ook een DOM-element als argument meegeven dat in de modal-gebeurtenissen ontvangen kan worden (als de eigenschap `relatedTarget`). (Bijv. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.)
`toggle`	Schakelt een modal handmatig. Keert terug naar de aanroeper voordat de modal daadwerkelijk getoond of verborgen is (dus vóór de gebeurtenis `shown.bs.modal` of `hidden.bs.modal`).

Gebeurtenissen

De modal-klasse van Bootstrap stelt een aantal gebeurtenissen beschikbaar om op de modal-functionaliteit in te haken. Alle modal-gebeurtenissen worden op de modal zelf afgevuurd (dus op de <div class="modal">).

Gebeurtenis	Omschrijving
`hide.bs.modal`	Deze gebeurtenis wordt direct afgevuurd wanneer de instantiemethode `hide` is aangeroepen.
`hidden.bs.modal`	Deze gebeurtenis wordt afgevuurd wanneer de modal volledig voor de gebruiker verborgen is (wacht tot de CSS-transities voltooid zijn).
`hidePrevented.bs.modal`	Deze gebeurtenis wordt afgevuurd wanneer de modal getoond wordt, zijn backdrop `static` is en er buiten de modal wordt geklikt. De gebeurtenis wordt ook afgevuurd wanneer op de Escape-toets wordt gedrukt terwijl de optie `keyboard` op `false` staat.
`show.bs.modal`	Deze gebeurtenis wordt direct afgevuurd wanneer de instantiemethode `show` wordt aangeroepen. Wordt die door een klik veroorzaakt, dan is het aangeklikte element beschikbaar als de eigenschap `relatedTarget` van de gebeurtenis.
`shown.bs.modal`	Deze gebeurtenis wordt afgevuurd wanneer de modal zichtbaar is gemaakt voor de gebruiker (wacht tot de CSS-transities voltooid zijn). Wordt die door een klik veroorzaakt, dan is het aangeklikte element beschikbaar als de eigenschap `relatedTarget` van de gebeurtenis.

const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // doe iets...
})

Modal

Hoe het werkt

Voorbeelden

Modal-componenten

Modal-titel

Live demo

Statische backdrop

Lange content scrollen

Verticaal gecentreerd

Tooltips en popovers

Het grid gebruiken

Variërende modal-content

Wisselen tussen modals

Animatie wijzigen

Animatie verwijderen

Dynamische hoogtes

Toegankelijkheid

YouTube-video's insluiten

Optionele formaten

Schermvullende modal

CSS

Variabelen

Sass-variabelen

Loop

Gebruik

Via data-attributen

Schakelen

Sluiten

Via JavaScript

Opties

Methodes

Opties meegeven

Gebeurtenissen