Bootstrap 4 Modal
Bootstrap 4 Modal
De Modal-component is een dialoogvenster/pop-upvenster dat bovenaan de huidige pagina wordt weergegeven:
Hoe maak je een modal?
Het volgende voorbeeld laat zien hoe u een basismodal maakt:
Voorbeeld
<!-- 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>
Animatie toevoegen
Gebruik de .fadeklasse om een vervagingseffect toe te voegen bij het openen en sluiten van de modal:
Voorbeeld
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
modale grootte
Verander de grootte van de modal door de .modal-sm
klasse toe te voegen voor kleine modals, .modal-lgklasse voor grote modals, of .modal-xlvoor extra grote modals.
Voeg de grootteklasse toe aan het <div>element met class .modal-dialog:
Kleine Modal
<div class="modal-dialog modal-sm">
Grote Modal
<div class="modal-dialog modal-lg">
Extra groot model
<div class="modal-dialog modal-xl">
Standaard zijn modals "gemiddeld" groot.
Gecentreerd Modaal
Centreer de modal verticaal en horizontaal binnen de pagina, met de .modal-dialog-centered
klasse:
Voorbeeld
<div class="modal-dialog modal-dialog-centered">
Scrollen Modaal
Wanneer u veel inhoud in de modal heeft, wordt een schuifbalk aan de pagina toegevoegd. Zie de voorbeelden hieronder om het te begrijpen:
Voorbeeld
<div class="modal-dialog">
Het is echter mogelijk om alleen binnen de modal te scrollen, in plaats van de pagina zelf, door toe te voegen .modal-dialog-scrollableaan .modal-dialog:
Voorbeeld
<div class="modal-dialog modal-dialog-scrollable">
Volledige Bootstrap Modal Referentie
Ga voor een volledige referentie van alle modale opties, methoden en evenementen naar onze Bootstrap JS Modal Reference .