Bootstrap 4 modaal
Bootstrap 4 modaal
Die Modale komponent is 'n dialoogkassie/opspringvenster wat bo-op die huidige bladsy vertoon word:
Hoe om 'n modaal te skep
Die volgende voorbeeld wys hoe om 'n basiese modaal te skep:
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>
Voeg animasie by
Gebruik die .fadeklas om 'n vervaag-effek by te voeg wanneer die modaal oopgemaak en toegemaak word:
Voorbeeld
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
Modale grootte
Verander die grootte van die modale deur die .modal-sm
klas by te voeg vir klein modale, .modal-lgklas vir groot modale, of .modal-xlvir ekstra groot modale.
Voeg die grootte klas by die <div>element met klas .modal-dialog:
Klein Modaal
<div class="modal-dialog modal-sm">
Groot Modaal
<div class="modal-dialog modal-lg">
Ekstra groot modaal
<div class="modal-dialog modal-xl">
By verstek is modale "medium" in grootte.
Gesentreerde modaal
Sentreer die modaal vertikaal en horisontaal binne die bladsy, met die .modal-dialog-centered
klas:
Voorbeeld
<div class="modal-dialog modal-dialog-centered">
Blaai Modaal
As u baie inhoud in die modaal het, word 'n skuifbalk by die bladsy gevoeg. Sien die voorbeelde hieronder om dit te verstaan:
Voorbeeld
<div class="modal-dialog">
Dit is egter moontlik om slegs binne die modaal te blaai, in plaas van die bladsy self, deur by te voeg .modal-dialog-scrollableby .modal-dialog:
Voorbeeld
<div class="modal-dialog modal-dialog-scrollable">
Voltooi Bootstrap Modal Reference
Vir 'n volledige verwysing van alle modale opsies, metodes en gebeure, gaan na ons Bootstrap JS Modal Reference .