Bootstrap modale plug-in
De modale plug-in
De Modal-plug-in is een dialoogvenster/pop-upvenster dat bovenaan de huidige pagina wordt weergegeven:
Tip: Plug-ins kunnen afzonderlijk worden toegevoegd (met het individuele "modal.js"-bestand van Bootstrap), of allemaal tegelijk (met "bootstrap.js" of "bootstrap.min.js").
Hoe maak je een modal?
Het volgende voorbeeld laat zien hoe u een basismodal maakt:
Voorbeeld
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Voorbeeld uitgelegd
Het gedeelte "Trigger":
Om het modale venster te activeren, moet u een knop of een link gebruiken.
Voeg vervolgens de twee data-*-attributen toe:
data-toggle="modal"opent het modale vensterdata-target="#myModal"wijst naar de id van de modal
Het "modale" gedeelte:
Het bovenliggende element <div>van de modal moet een ID hebben die gelijk is aan de waarde van het data-target-kenmerk dat wordt gebruikt om de modal te activeren ("myModal").
De .modalklasse identificeert de inhoud van <div>als een modaal en brengt er focus op.
De .fadeklasse voegt een overgangseffect toe dat het modale in en uit vervaagt. Verwijder deze klasse als u dit effect niet wilt.
Het kenmerk role="dialog"verbetert de toegankelijkheid voor mensen die schermlezers gebruiken.
De .modal-dialogklasse stelt de juiste breedte en marge van de modal in.
Het gedeelte "Modale inhoud":
De <div>met class="modal-content" stijlen de modal (rand, achtergrondkleur, enz.). <div>Voeg hierbinnen de koptekst, hoofdtekst en voettekst van de modal toe.
De .modal-headerklasse wordt gebruikt om de stijl voor de kop van de modal te definiëren. De <button>binnenkant van de header heeft een data-dismiss="modal"attribuut dat de modal sluit als je erop klikt. De .closeklasse geeft de sluitknop een stijl en de .modal-titleklasse geeft de koptekst een juiste regelhoogte.
De .modal-bodyklasse wordt gebruikt om de stijl voor de body van de modal te definiëren. Voeg hier eventuele HTML-opmaak toe; alinea's, afbeeldingen, video's, enz.
De .modal-footerklasse wordt gebruikt om de stijl voor de voettekst van de modal te definiëren. Merk op dat dit gebied standaard rechts uitgelijnd is.
modale grootte
Wijzig de grootte van de modal door de .modal-sm
klasse toe te voegen voor kleine modalen of .modal-lgklasse voor grote modalen.
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">
Standaard zijn modals middelgroot.
Volledige Bootstrap Modal Referentie
Ga voor een volledige referentie van alle modale opties, methoden en evenementen naar onze Bootstrap JS Modal Reference .