Modal
Gamita ang JavaScript modal plugin sa Bootstrap aron idugang ang mga diyalogo sa imong site para sa mga lightbox, pahibalo sa user, o hingpit nga custom nga sulod.
Giunsa kini paglihok
Sa dili pa magsugod sa modal component sa Bootstrap, siguroha nga basahon ang mosunod kay bag-o lang nausab ang among mga opsyon sa menu.
- Gitukod ang mga modal gamit ang HTML, CSS, ug JavaScript. Gipahimutang sila sa tanan nga butang sa dokumento ug kuhaa ang scroll gikan sa
<body>
aron ang modal nga sulud mag-scroll sa baylo. - Ang pag-klik sa modal "backdrop" awtomatik nga magsira sa modal.
- Ang Bootstrap nagsuporta lamang sa usa ka modal window sa usa ka higayon. Ang mga nested modals dili suportado tungod kay kami nagtuo nga kini dili maayo nga mga kasinatian sa tiggamit.
- Ang paggamit sa mga modal
position: fixed
, nga usahay medyo partikular bahin sa paghubad niini. Kung mahimo, ibutang ang imong modal HTML sa taas nga lebel nga posisyon aron malikayan ang posibleng pagpanghilabot sa ubang mga elemento. Mahimong makaatubang ka sa mga isyu kung magsalag sa usa.modal
sa lain nga naayos nga elemento. - Sa makausa pa, tungod sa
position: fixed
, adunay pipila ka mga caveat sa paggamit sa modals sa mga mobile device. Tan-awa ang among browser support docs para sa mga detalye. - Tungod sa kung giunsa paghubit sa HTML5 ang mga semantiko niini, ang
autofocus
HTML attribute walay epekto sa Bootstrap modals. Aron makab-ot ang parehas nga epekto, gamita ang pipila ka naandan nga JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
pangutana sa media. Tan-awa ang
gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .
Padayon sa pagbasa alang sa mga demo ug mga panudlo sa paggamit.
Mga pananglitan
Modal nga mga sangkap
Sa ubos mao ang usa ka static modal nga pananglitan (nagpasabot nga kini position
ug display
na-overridden). Apil ang modal header, modal body (gikinahanglan alang sa padding
), ug modal footer (opsyonal). Gihangyo namo nga iapil nimo ang mga modal header nga adunay mga aksyon sa pag-dismiss kung mahimo, o paghatag og laing klaro nga aksyon sa pag-dismiss.
<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 nga demo
I-toggle ang usa ka working modal demo pinaagi sa pag-klik sa buton sa ubos. Kini mag-slide paubos ug mawala gikan sa ibabaw sa panid.
<!-- 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>
Static nga backdrop
Kung ang backdrop gibutang sa static, ang modal dili magsira kung mag-klik sa gawas niini. I-klik ang buton sa ubos aron sulayan kini.
<!-- 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>
Pag-scroll sa taas nga sulud
Kung ang mga modals mahimong taas kaayo alang sa viewport o aparato sa user, sila mag-scroll nga independente sa panid mismo. Sulayi ang demo sa ubos aron makita kung unsa ang among gipasabut.
Makahimo ka usab og usa ka scrollable modal nga nagtugot sa pag-scroll sa modal nga lawas pinaagi sa pagdugang .modal-dialog-scrollable
sa .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Patindog nga nakasentro
Idugang .modal-dialog-centered
ngadto .modal-dialog
sa patindog nga sentro sa 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>
Mga tooltip ug popovers
Ang mga tooltip ug popovers mahimong ibutang sulod sa modals kung gikinahanglan. Kung sirado ang mga modal, ang bisan unsang mga tooltip ug mga popover sa sulod awtomatiko usab nga gisalikway.
<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>
Paggamit sa grid
Gamita ang Bootstrap grid system sulod sa usa ka modal pinaagi sa pagsalag .container-fluid
sulod sa .modal-body
. Dayon, gamita ang normal nga mga klase sa sistema sa grid sama sa imong buhaton bisan asa.
<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>
Nagkalainlain nga sulud sa modal
Adunay usa ka hugpong sa mga buton nga ang tanan nag-trigger sa parehas nga modal nga adunay gamay nga lainlaing mga sulud? Paggamit event.relatedTarget
ug HTML nga mga data-*
hiyas (posible pinaagi sa jQuery ) aron lainlain ang mga sulod sa modal depende kung unsang buton ang gi-klik.
Sa ubos usa ka live demo nga gisundan sa pananglitan sa HTML ug JavaScript. Para sa dugang nga impormasyon, basaha ang modal nga mga panghitabo docs para sa mga detalye sa 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)
})
Usba ang animation
Ang $modal-fade-transform
variable nagtino sa pagbag-o nga kahimtang sa sa .modal-dialog
wala pa ang modal fade-in animation, ang $modal-show-transform
variable nagtino sa pagbag-o sa .modal-dialog
sa katapusan sa modal fade-in animation.
Kung gusto nimo pananglitan ang usa ka zoom-in nga animation, mahimo nimong itakda $modal-fade-transform: scale(.8)
.
Kuhaa ang animation
Alang sa mga modals nga yano nga makita imbes nga mawala aron makita, kuhaa ang .fade
klase gikan sa imong modal markup.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dinamikong gitas-on
Kung ang gitas-on sa usa ka modal mausab samtang kini bukas, kinahanglan ka nga tawagan $('#myModal').modal('handleUpdate')
aron ayohon ang posisyon sa modal kung adunay usa ka scrollbar nga makita.
Accessibility
Siguruha nga idugang ang aria-labelledby="..."
, nga nagtumong sa modal nga titulo, sa .modal
. Dugang pa, mahimo kang maghatag ug deskripsyon sa imong modal dialog sa aria-describedby
on .modal
. Timan-i nga dili nimo kinahanglan nga idugang role="dialog"
tungod kay gidugang na namo kini pinaagi sa JavaScript.
Pag-embed sa mga video sa YouTube
Ang pag-embed sa mga video sa YouTube sa modals nanginahanglan dugang nga JavaScript nga wala sa Bootstrap aron awtomatiko nga ihunong ang playback ug daghan pa. Tan-awa kining makatabang nga post sa Stack Overflow alang sa dugang nga impormasyon.
Opsyonal nga mga gidak-on
Ang mga modala adunay tulo ka opsyonal nga mga gidak-on, nga magamit pinaagi sa mga klase sa modifier nga ibutang sa usa ka .modal-dialog
. Kini nga mga gidak-on nagsugod sa pipila ka mga breakpoint aron malikayan ang pinahigda nga mga scrollbar sa mas pig-ot nga mga viewport.
Gidak-on | Klase | Modal max-lapad |
---|---|---|
Gamay | .modal-sm |
300px |
Default | Wala | 500px |
Dako | .modal-lg |
800px |
Dugang dako | .modal-xl |
1140px |
Ang among default modal nga walay modifier class naglangkob sa "medium" size modal.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Paggamit
Ang modal plugin nag-toggle sa imong tinago nga sulud kung gikinahanglan, pinaagi sa mga hiyas sa datos o JavaScript. Nagdugang usab .modal-open
kini sa <body>
pag-override sa default nga pamatasan sa pag-scroll ug nagmugna usa ka .modal-backdrop
aron mahatagan usa ka lugar sa pag-klik alang sa pagtangtang sa gipakita nga modals kung nag-klik sa gawas sa modal.
Pinaagi sa data attributes
Pag-aktibo sa usa ka modal nga wala nagsulat sa JavaScript. Ibutang data-toggle="modal"
sa usa ka elemento sa controller, sama sa usa ka buton, uban sa usa ka data-target="#foo"
o href="#foo"
sa target sa usa ka piho nga modal sa toggle.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Pinaagi sa JavaScript
Pagtawag og modal nga adunay id myModal
nga adunay usa ka linya sa JavaScript:
$('#myModal').modal(options)
Mga kapilian
Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-
, sama sa data-backdrop=""
.
Ngalan | Matang | Default | Deskripsyon |
---|---|---|---|
backdrop | boolean o ang string'static' |
tinuod | Naglakip sa usa ka elemento sa modal-backdrop. Sa laing paagi, ipiho static ang usa ka backdrop nga wala magsira sa modal sa pag-klik. |
keyboard | boolean | tinuod | Pagsira sa modal kung ang escape key gipugos |
focus | boolean | tinuod | Gibutang ang focus sa modal kung gisugdan. |
ipakita | boolean | tinuod | Nagpakita sa modal kung gisugdan. |
Pamaagi
Asynchronous nga mga pamaagi ug transisyon
Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .
Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .
.modal(options)
Gi-aktibo ang imong sulud ingon usa ka modal. Modawat ug opsyonal nga mga kapilian object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Manwal nga mag-toggle sa usa ka modal. Mibalik sa nagtawag sa wala pa ang modala sa tinuud gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.modal
o hidden.bs.modal
panghitabo).
$('#myModal').modal('toggle')
.modal('show')
Manwal nga nagbukas sa usa ka modal. Mibalik sa nagtawag sa wala pa ipakita ang modal (ie sa wala pa shown.bs.modal
mahitabo ang panghitabo).
$('#myModal').modal('show')
.modal('hide')
Manwal nga nagtago sa usa ka modal. Mibalik sa nagtawag sa wala pa ang modala sa tinuud gitago (ie sa wala pa hidden.bs.modal
mahitabo ang panghitabo).
$('#myModal').modal('hide')
.modal('handleUpdate')
Manwal nga i-adjust ang posisyon sa modal kung ang gitas-on sa usa ka modal mausab samtang kini bukas (pananglitan kung adunay makita nga scrollbar).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Makaguba sa modal sa usa ka elemento.
Mga panghitabo
Ang modal nga klase sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa modal functionality. Ang tanan nga modal nga mga panghitabo gipabuto sa modal mismo (ie sa <div class="modal">
).
Uri sa Hitabo | Deskripsyon |
---|---|
show.bs.modal | Kini nga panghitabo nagdilaab dayon kung ang show pamaagi sa pananglitan gitawag. Kung tungod sa usa ka pag-klik, ang na-klik nga elemento magamit ingon nga relatedTarget kabtangan sa panghitabo. |
gipakita.bs.modal | Kini nga panghitabo gipabuto kung ang modal nahimo nga makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). Kung tungod sa usa ka pag-klik, ang na-klik nga elemento magamit ingon nga relatedTarget kabtangan sa panghitabo. |
hide.bs.modal | Kini nga panghitabo gipabuto dayon kung ang hide pamaagi sa pananglitan gitawag na. |
hidden.bs.modal | Kini nga panghitabo gipabuto kung ang modal nahuman na nga gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). |
hidePrevented.bs.modal | Kini nga panghitabo gipabuto kung ang modal gipakita, ang backdrop niini static ug usa ka pag-klik sa gawas sa modal o usa ka escape key press ang gihimo gamit ang kapilian sa keyboard o data-keyboard gitakda sa false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})