Modal
Fa'aoga le Bootstrap's JavaScript modal plugin e fa'aopoopo ai fa'atalanoaga i lau 'upega tafa'ilagi mo pusa moli, fa'amatalaga a tagata fa'aoga, po'o mea fa'aaganu'u atoatoa.
E faapefea ona galue
Aʻo leʻi amataina le vaega faʻapitoa a Bootstrap, ia mautinoa e faitau mea nei ona ua suia talu ai nei a matou lisi lisi.
- O faʻataʻitaʻiga e fausia i le HTML, CSS, ma le JavaScript. O lo'o fa'atulagaina i luga o isi mea uma i totonu o le pepa ma aveese le ta'ai mai le
<body>
fa'asolo ina ia mafai ai ona fa'asolo mea fa'apitoa. - O le kiliki i luga o le modal "backdrop" o le a otometi lava ona tapunia le modal.
- E na'o le tasi le fa'amalama fa'ata'ita'i e lagolagoina e Bootstrap i le taimi. E le lagolagoina auala fa'akomepiuta aua matou te talitonu o ni fa'amatalaga leaga a tagata fa'aoga.
- Fa'aoga tupe
position: fixed
, lea e mafai i nisi taimi ona fa'apitoa i lona fa'aliliuga. So'o se taimi e mafai ai, tu'u lau HTML HTML i se tulaga maualuga e aloese ai mai fa'alavelave fa'alavelave mai isi elemene. E ono tula'i mai ni fa'afitauli pe a fa'amomoe se.modal
i totonu o se isi elemene mautu. - Toe tasi, ona o
position: fixed
, o loʻo i ai ni faʻamatalaga faʻatasi ma le faʻaogaina o auala i luga o masini feaveaʻi. Va'ai la matou su'esu'ega lagolago docs mo fa'amatalaga. - Ona o le auala e faʻamatalaina ai e le HTML5 ona faʻaoga, o le
autofocus
uiga HTML e leai se aoga i Bootstrap modals. Ina ia ausia le aafiaga tutusa, faʻaaoga nisi JavaScript masani:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
aufaasālalau. Va'ai le vaega
fa'aitiitiga fa'aitiitiga oa matou pepa fa'aoga avanoa .
Faitau pea mo faʻataʻitaʻiga ma taʻiala faʻaoga.
Faataitaiga
Vaega tau tupe
O loʻo i lalo se faʻataʻitaʻiga faʻataʻitaʻiga masani (o lona uiga o lona position
ma display
ua faʻamalo). O lo'o aofia ai le fa'auluuluga fa'apena, tino fa'apitoa (mana'omia mo padding
), ma le fa'avae fa'ailoga (filifiliga). Matou te talosaga atu ia e fa'aofia fa'aulutala fa'apena ma fa'ate'a gaioiga i so'o se taimi e mafai ai, po'o le tu'uina atu o se isi gaioiga fa'ate'a manino.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Live demo
Su'e se fa'ata'ita'iga fa'atino galue i le kilikiina o le ki lalo. O le a fa'ase'e ifo i lalo ma mou atu mai le pito i luga o le itulau.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Fa'aola fa'atete'e
A tu'u le tua i le tulaga, e le tapunia le modal pe a kiliki i fafo. Kiliki le ki lalo e taumafai ai.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Ta'avale anotusi umi
A o'o ina umi tele auala mo le va'aiga a le tagata fa'aoga po'o le masini, latou te ta'avale tuto'atasi mai le itulau lava ia. Taumafai le faʻataʻitaʻiga o loʻo i lalo e iloa ai le matou uiga.
E mafai foʻi ona e fatuina se taʻavale faʻapipiʻi lea e mafai ai ona taʻavale le tino modal e ala i le faʻaopoopo .modal-dialog-scrollable
i le .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Tutotonu i luga
Fa'aopoopo .modal-dialog-centered
i .modal-dialog
le fa'atūtonu i le ogatotonu le modal.
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
Tooltips ma popovers
Tooltips ma popovers e mafai ona tuʻuina i totonu o auala pe a manaʻomia. A tapunia auala, so'o se meafaigaluega ma popovers i totonu e otometi lava ona fa'ate'aina.
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
Fa'aaogaina o le fa'asologa
Fa'aaogā le faiga fa'asologa o Bootstrap i totonu o se fa'ata'ita'iga e ala i le fa'aputu .container-fluid
i totonu o le .modal-body
. Ona fa'aaoga lea o vasega masani fa'asologa o faiga e pei ona e faia i se isi lava mea.
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
Feeseesea'iga tulaga fa'aoga
E i ai ni fa'amau fa'amau e fa'aoso uma le faiga tutusa ma ni mea e ese'ese teisi? Fa'aoga event.relatedTarget
ma uiga HTMLdata-*
(atonu e ala i le jQuery ) e fesuia'i mea o lo'o i totonu o le modal fa'atatau i le fa'amau na kiliki.
O loʻo i lalo se faʻataʻitaʻiga ola ma faʻataʻitaʻiga HTML ma JavaScript. Mo nisi fa'amatalaga, faitau le modal events docs mo fa'amatalaga ile relatedTarget
.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
Suia le animation
O le $modal-fade-transform
fesuiaiga e fuafua ai le suiga o le tulaga .modal-dialog
aʻo leʻi oʻo i le modal fade-in animation, o le $modal-show-transform
fesuiaiga e fuafua le suiga o .modal-dialog
le i le pito o le modal fade-in animation.
Afai e te manaʻo mo se faʻataʻitaʻiga se faʻaoso-i totonu animation, e mafai ona e seti $modal-fade-transform: scale(.8)
.
Aveese le animation
Mo auala e foliga mai nai lo le mou atu e matamata ai, aveese le .fade
vasega mai lau faʻailoga faʻailoga.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Maualuluga malosi
Afai e suia le maualuga o se auala a'o tatala, e tatau ona e vala'au $('#myModal').modal('handleUpdate')
e toe fetu'una'i le tulaga o le modal pe a aliali mai se ta'avale.
Avanoa
Ia mautinoa e faʻaopoopo aria-labelledby="..."
, faʻasino le ulutala modal, i .modal
. E le gata i lea, e mafai ona e tuʻuina atu se faʻamatalaga o lau faʻasalalauga faʻatasi ma aria-describedby
on .modal
. Manatua e te le mana'omia le fa'aopoopo role="dialog"
talu ai ua uma ona matou fa'aopoopoina e ala i le JavaScript.
Fa'apipi'i ata YouTube
O le fa'apipi'iina o vitio YouTube i fa'aola e mana'omia ai le JavaScript fa'aopoopo ae le o le Bootstrap e otometi ai ona taofi le toe ta'alo ma sili atu. Va'ai lenei pou fesoasoani Stack Overflow mo nisi fa'amatalaga.
Fa'ailoga tetele
E tolu lapopo'a fa'apitoa, e maua e ala i vasega suiga e tu'u i luga o se .modal-dialog
. O nei lapopo'a e a'a i totonu i nisi o va'a e alofia ai fa'alava ta'ai i luga o va'aiga vaapiapi.
Tele | Vasega | Modal max-lautele |
---|---|---|
Laiti | .modal-sm |
300px |
Fa'atonu | Leai | 500px |
Tele | .modal-lg |
800px |
Tele tele | .modal-xl |
1140px |
O la matou fa'aoga fa'aletonu e aunoa ma le fa'avasegaina o le vasega o lo'o fa'atūina ai le fa'asologa o le lapopoa "medium".
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Fa'aoga
O le modal plugin e fesuia'i au mea natia pe a mana'omia, e ala i fa'amatalaga uiga po'o le JavaScript. E fa'aopoopoina fo'i .modal-open
i le <body>
fa'ato'a fa'aletonu le ta'avale amio ma fa'atupuina se .modal-backdrop
e tu'uina atu ai se vaega kiliki mo le fa'ate'aina o fa'aaliga fa'aalia pe a kiliki i fafo atu o le fa'ailoga.
E ala i fa'amaumauga uiga
Fa'agaoioia se faiga e aunoa ma le tusia o le JavaScript. Seti data-toggle="modal"
i luga o se elemene e pulea, pei o se faamau, faatasi ai ma se data-target="#foo"
po href="#foo"
o le taulaʻi i se faiga faʻapitoa e fesuiaʻi.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
E ala i le JavaScript
Valaau se modal ma id myModal
ma se laina e tasi o le JavaScript:
$('#myModal').modal(options)
Filifiliga
O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-
, pei o le data-backdrop=""
.
Igoa | Ituaiga | Fa'atonu | Fa'amatalaga |
---|---|---|---|
tuaa | boolean po'o le manoa'static' |
moni | E aofia ai se elemene fa'aola-backdrop. I le isi itu, fa'amaoti static mo se fa'ata'atia e le tapuni ai le auala ile kiliki. |
piano | boolean | moni | Tapuni le auala pe a oomi le ki sola |
taula'i | boolean | moni | Tu'u le taula'i ile faiga pe a amatalia. |
fa'aali | boolean | moni | Fa'aalia le faiga pe'ā amata. |
Metotia
Metotia ma suiga e le tutusa
O metotia API uma e le fetaui ma amata se suiga . Latou te toe fo'i atu i le tagata telefoni i le taimi lava e amata ai le suiga ae le'i uma . E le gata i lea, o le a le amanaʻiaina se auala e valaʻau ai i se vaega o suiga .
.modal(options)
Fa'agaoioia lau anotusi e fai ma fa'ata'ita'iga. Talia se filifiliga faitalia object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Su'e ma le lima se faiga. Toe fo'i i le tagata vala'au a'o le'i fa'aalia pe natia le modal (fa'atusa a'o le'i tupu le shown.bs.modal
po'o le hidden.bs.modal
mea na tupu).
$('#myModal').modal('toggle')
.modal('show')
Tatala ma le lima se auala. Toe fo'i atu i le tagata vala'au a'o le'i fa'aalia moni le modal (fa'atusa a'o le'i tupu le shown.bs.modal
mea na tupu).
$('#myModal').modal('show')
.modal('hide')
Natia ma le lima se auala. Toe fo'i i le tagata vala'au a'o le'i natia moni le modal (fa'atusa a'o le'i tupu le hidden.bs.modal
mea na tupu).
$('#myModal').modal('hide')
.modal('handleUpdate')
Toe fetu'una'i ma le lima le tulaga o le auala pe a suia le maualuga o le auala a'o tatala (fa'apea pe a aliali mai se ta'avale).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Fa'aleaga le faiga o se elemene.
Mea na tutupu
O le vasega fa'apitoa a Bootstrap o lo'o fa'aalia ai ni nai mea na tutupu mo le fa'aogaina o galuega fa'atino. O mea faʻapitoa uma e faʻaumatia i le modal lava ia (ie i le <div class="modal">
).
Ituaiga Mea | Fa'amatalaga |
---|---|
show.bs.modal | E mu vave lenei mea pe a show valaʻau le auala faʻataʻitaʻiga. Afai e mafua mai i se kiliki, o le elemene kiliki e avanoa e avea ma relatedTarget meatotino o le mea na tupu. |
fa'aalia.bs.modal | O lenei mea na tupu e faʻamalo pe a faʻaalia le modal i le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa). Afai e mafua mai i se kiliki, o le elemene kiliki e avanoa e avea ma relatedTarget meatotino o le mea na tupu. |
hide.bs.modal | O lenei mea na tupu e faʻamalo vave pe a hide valaʻau le auala faʻataʻitaʻiga. |
hidden.bs.modal | O lenei mea e tupu pe a maeʻa ona natia le modal mai le tagata faʻaoga (o le a faʻatali mo suiga CSS e maeʻa). |
hidePrevented.bs.modal | O lenei mea e tupu pe a faʻaalia le modal, o lona tua static ma se kiliki i fafo atu o le modal poʻo se sosolo ki lomitusi e faia i le filifiliga keyboard pe data-keyboard seti i le false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})