Bootstrap modale inprop
Die modale inprop
Die Modal-inprop is 'n dialoogkassie/opspringvenster wat bo-op die huidige bladsy vertoon word:
Wenk: Inproppe kan individueel ingesluit word (met Bootstrap se individuele "modal.js"-lêer), of alles op een slag (met "bootstrap.js" of "bootstrap.min.js").
Hoe om 'n modaal te skep
Die volgende voorbeeld wys hoe om 'n basiese modaal te skep:
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 Verduidelik
Die "Trigger" deel:
Om die modale venster te aktiveer, moet jy 'n knoppie of 'n skakel gebruik.
Sluit dan die twee data-*-kenmerke in:
data-toggle="modal"maak die modale venster oopdata-target="#myModal"wys na die id van die modaal
Die "Modale" deel:
Die ouer <div>van die modaal moet 'n ID hê wat dieselfde is as die waarde van die data-teiken-kenmerk wat gebruik word om die modaal ("myModal") te aktiveer.
Die .modalklas identifiseer die inhoud van <div>as 'n modaal en bring fokus daarop.
Die .fadeklas voeg 'n oorgangseffek by wat die modale in en uit vervaag. Verwyder hierdie klas as jy nie hierdie effek wil hê nie.
Die kenmerk role="dialog"verbeter toeganklikheid vir mense wat skermlesers gebruik.
Die .modal-dialogklas stel die regte breedte en marge van die modaal vas.
Die "Modale inhoud" deel:
Die <div>met class="modal-content" style die modaal (grens, agtergrondkleur, ens.). Hierin <div>voeg die modaal se kopskrif, liggaam en voetskrif by.
Die .modal-headerklas word gebruik om die styl vir die kopskrif van die modaal te definieer. Die <button>binnekant van die kop het 'n data-dismiss="modal"kenmerk wat die modaal sluit as jy daarop klik. Die .closeklas styl die toemaakknoppie, en die .modal-titleklas styl die kopskrif met 'n behoorlike lynhoogte.
Die .modal-bodyklas word gebruik om die styl vir die liggaam van die modaal te definieer. Voeg enige HTML-opmerk hier by; paragrawe, beelde, video's, ens.
Die .modal-footerklas word gebruik om die styl vir die voetskrif van die modaal te definieer. Let daarop dat hierdie area by verstek regbelyn is.
Modale grootte
Verander die grootte van die modale deur die .modal-sm
klas vir klein modale of .modal-lgklas vir groot modale by te voeg.
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">
By verstek is modale medium in grootte.
Voltooi Bootstrap Modal Reference
Vir 'n volledige verwysing van alle modale opsies, metodes en gebeure, gaan na ons Bootstrap JS Modal Reference .