Bootstrap 5 Modals

Modaal

Het Modal-component is een dialoogvak/uitklapvenster dat weergegeven wordt bovenop de huidige pagina:

Hoe een modaal te maken

Dit voorbeeld toont hoe je een basis modaal maakt:

Voorbeeld

<!-- Knop om modaal te openen -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open modaal
</button>
<!-- Modaal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modaal titel -->
      <div class="modal-header">
        <h4 class="modal-title">Modaal kop</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Modaal inhoud -->
      <div class="modal-body">
        Modaal inhoud ..
      </div>
      <!-- Modaal voettekst -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Sluit</button>
      </div>
    </div>
  </div>
</div>

Probeer het zelf

voeg animatie toe

Gebruik .fade Voeg een in- en uitschakelend effect toe door de klasse toe te voegen:

Voorbeeld

<!-- Fadende modaal -->
<div class="modal fade"></div>
<!-- Modaal zonder animatie -->
<div class="modal"></div>

Probeer het zelf

Modaal formaat

Door een kleine modaal toe te voegen .modal-sm klasse (max-width 300px) om een groot modaal toe te voegen .modal-lg klasse (max-width 800px) of voeg toe voor een supergroot modaal .modal-xl om de grootte van het modaal te wijzigen (max-width 1140 pixels). Standaard is de maximale breedte 500 pixels.

Plaats .modal-dialog Voeg samen met de klasse en de maatklasse toe aan <div> Element:

Small Modal

<div class="modal-dialog modal-sm">

Probeer het zelf

Large Modal

<div class="modal-dialog modal-lg">

Probeer het zelf

Extra Large Modal

<div class="modal-dialog modal-xl">

Probeer het zelf

Standaard is de grootte van het modaal "medium" (maximale breedte 500px).

Volledige scherm modaal

Als u wilt dat het modaal de hele breedte en hoogte van de pagina overspant, gebruik dan .modal-fullscreen Class:

Voorbeeld

<div class="modal-dialog modal-fullscreen">

Probeer het zelf

Responsieve volledige scherm modaal

U kunt ook .modal-fullscreen-*-* Class beheert wanneer een modaal volledig scherm moet worden weergegeven:

Class Beschrijving Voorbeeld
.modal-fullscreen-sm-down Boven 576px volledig scherm Probeer het zelf
.modal-fullscreen-md-down Boven 768px volledig scherm Probeer het zelf
.modal-fullscreen-lg-down Boven 992px volledig scherm Probeer het zelf
.modal-fullscreen-xl-down Boven 1200px volledig scherm Probeer het zelf
.modal-fullscreen-xxl-down Boven 1400px volledig scherm Probeer het zelf

Gecentreerde modaal

Door het gebruik van .modal-dialog-centric Class, centreren van modaal zowel verticaal als horizontaal in de pagina:

Voorbeeld

<div class="modal-dialog modal-dialog-centered">

Probeer het zelf

Scrollende modaal

Wanneer er veel inhoud in het modaal is, wordt een scrollbar toegevoegd aan de pagina. Bekijk het volgende voorbeeld om te begrijpen:

Voorbeeld

<div class="modal-dialog">

Probeer het zelf

Maar, door het gebruik van .modal-dialog-scrollable Toevoegen aan .modal-dialog Het is mogelijk om alleen in het modaal te scrollen, niet in de pagina zelf:

Voorbeeld

<div class="modal-dialog modal-dialog-scrollable">

Probeer het zelf