Gamitin ang JavaScript modal plugin ng Bootstrap upang magdagdag ng mga dialog sa iyong site para sa mga lightbox, notification ng user, o ganap na custom na content.
Paano ito gumagana
Bago magsimula sa modal component ng Bootstrap, siguraduhing basahin ang mga sumusunod dahil ang aming mga opsyon sa menu ay nagbago kamakailan.
Ang mga modal ay binuo gamit ang HTML, CSS, at JavaScript. Ang mga ito ay nakaposisyon sa lahat ng iba pa sa dokumento at alisin ang scroll mula sa <body>upang ang modal na nilalaman ay mag-scroll sa halip.
Ang pag-click sa modal na "backdrop" ay awtomatikong isasara ang modal.
Sinusuportahan lamang ng Bootstrap ang isang modal window sa isang pagkakataon. Hindi sinusuportahan ang mga nested modal dahil naniniwala kami na ang mga ito ay hindi magandang karanasan ng user.
Ginagamit ang mga modal position: fixed, na kung minsan ay medyo partikular sa pag-render nito. Hangga't maaari, ilagay ang iyong modal HTML sa isang top-level na posisyon upang maiwasan ang potensyal na interference mula sa iba pang mga elemento. Malamang na magkakaroon ka ng mga isyu kapag nag-nest ng isang sa .modalloob ng isa pang nakapirming elemento.
Muli, dahil sa position: fixed, may ilang mga caveat sa paggamit ng mga modal sa mga mobile device. Tingnan ang aming browser support docs para sa mga detalye.
Dahil sa kung paano tinukoy ng HTML5 ang mga semantika nito, ang autofocusHTML attribute ay walang epekto sa Bootstrap modals. Upang makamit ang parehong epekto, gumamit ng ilang custom na JavaScript:
Panatilihin ang pagbabasa para sa mga demo at mga alituntunin sa paggamit.
Mga halimbawa
Mga bahagi ng modal
Nasa ibaba ang isang static na halimbawa ng modal (ibig sabihin nito positionat displayna-override na). Kasama ang modal header, modal body (kinakailangan para sa padding), at modal footer (opsyonal). Hinihiling namin na isama mo ang mga modal header na may mga pagkilos na i-dismiss hangga't maaari, o magbigay ng isa pang tahasang pagkilos sa pag-dismiss.
Pamagat ng modal
Napupunta dito ang text ng modal body.
Live na demo
I-toggle ang gumaganang modal demo sa pamamagitan ng pag-click sa button sa ibaba. Magda-slide ito pababa at maglalaho mula sa itaas ng page.
Modal title
Woohoo, you're reading this text in a modal!
Pag-scroll ng mahabang nilalaman
Kapag masyadong mahaba ang mga modal para sa viewport o device ng user, nag-i-scroll sila nang hiwalay sa mismong page. Subukan ang demo sa ibaba upang makita kung ano ang ibig naming sabihin.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Patayong nakasentro
Idagdag .modal-dialog-centeredsa .modal-dialogpatayo na igitna ang modal.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Mga tooltip at popover
Ang mga tooltip at popover ay maaaring ilagay sa loob ng mga modal kung kinakailangan. Kapag isinara ang mga modal, awtomatikong dini-dismiss din ang anumang tooltip at popover sa loob.
Gamitin ang Bootstrap grid system sa loob ng isang modal sa pamamagitan ng pagpupugad sa .container-fluidloob ng .modal-body. Pagkatapos, gamitin ang normal na mga klase ng sistema ng grid gaya ng gagawin mo saanman.
Grids in modals
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
.col-md-6 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Pag-iiba-iba ng nilalaman ng modal
May isang grupo ng mga pindutan na lahat ay nagpapalitaw ng parehong modal na may bahagyang magkakaibang mga nilalaman? Gamitin event.relatedTargetat HTML na mga data-*katangian (maaaring sa pamamagitan ng jQuery ) upang pag-iba-ibahin ang mga nilalaman ng modal depende sa kung aling button ang na-click.
Nasa ibaba ang isang live na demo na sinusundan ng halimbawang HTML at JavaScript. Para sa higit pang impormasyon, basahin ang mga modal event docs para sa mga detalye sa relatedTarget.
New message
Alisin ang animation
Para sa mga modal na lilitaw lamang sa halip na mawala upang tingnan, alisin ang .fadeklase sa iyong modal markup.
Mga dinamikong taas
Kung nagbabago ang taas ng isang modal habang ito ay bukas, dapat kang tumawag $('#myModal').modal('handleUpdate')upang muling ayusin ang posisyon ng modal kung sakaling lumitaw ang isang scrollbar.
Accessibility
Siguraduhing magdagdag role="dialog"at aria-labelledby="...", na tumutukoy sa modal na pamagat, sa .modal, at role="document"sa .modal-dialogmismong. Bukod pa rito, maaari kang magbigay ng paglalarawan ng iyong modal dialog na may aria-describedbysa .modal.
Pag-embed ng mga video sa YouTube
Ang pag-embed ng mga video sa YouTube sa mga modal ay nangangailangan ng karagdagang JavaScript na wala sa Bootstrap upang awtomatikong ihinto ang pag-playback at higit pa. Tingnan ang kapaki-pakinabang na post na ito ng Stack Overflow para sa higit pang impormasyon.
Mga opsyonal na laki
Ang mga modal ay may dalawang opsyonal na laki, na magagamit sa pamamagitan ng mga klase ng modifier na ilalagay sa isang .modal-dialog. Ang mga laki na ito ay nagsisimula sa ilang mga breakpoint upang maiwasan ang mga pahalang na scrollbar sa mas makitid na viewport.
Large modal
...
Small modal
...
Paggamit
I-toggle ng modal plugin ang iyong nakatagong content on demand, sa pamamagitan ng mga attribute ng data o JavaScript. Nagdaragdag din ito .modal-opensa <body>to override default na pag-scroll na gawi at bumubuo ng .modal-backdroppara magbigay ng lugar ng pag-click para sa pag-dismiss ng mga ipinapakitang modal kapag nag-click sa labas ng modal.
Sa pamamagitan ng mga katangian ng data
Mag-activate ng modal nang hindi nagsusulat ng JavaScript. Itakda data-toggle="modal"sa isang elemento ng controller, tulad ng isang button, kasama ng isang data-target="#foo"o href="#foo"upang i-target ang isang partikular na modal upang i-toggle.
Sa pamamagitan ng JavaScript
Tumawag ng modal na may id myModalna may isang linya ng JavaScript:
Mga pagpipilian
Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-backdrop="".
Pangalan
Uri
Default
Paglalarawan
backdrop
boolean o ang string'static'
totoo
May kasamang modal-backdrop na elemento. Bilang kahalili, tumukoy staticpara sa isang backdrop na hindi nagsasara ng modal sa pag-click.
keyboard
boolean
totoo
Isinasara ang modal kapag pinindot ang escape key
focus
boolean
totoo
Inilalagay ang focus sa modal kapag nasimulan.
palabas
boolean
totoo
Ipinapakita ang modal kapag nasimulan.
Paraan
Mga asynchronous na pamamaraan at paglipat
Ang lahat ng mga pamamaraan ng API ay asynchronous at nagsisimula ng isang paglipat . Bumalik sila sa tumatawag sa sandaling magsimula ang paglipat ngunit bago ito matapos . Bilang karagdagan, babalewalain ang isang method call sa isang transitioning component .
Ina-activate ang iyong content bilang modal. Tumatanggap ng opsyonal na opsyon object.
.modal('toggle')
Manu-manong i-toggle ang isang modal. Bumabalik sa tumatawag bago ang modal ay aktwal na naipakita o naitago (ibig sabihin, bago mangyari ang shown.bs.modalo hidden.bs.modalkaganapan).
.modal('show')
Manu-manong nagbubukas ng modal. Bumabalik sa tumatawag bago aktwal na naipakita ang modal (ibig sabihin, bago shown.bs.modalmangyari ang kaganapan).
.modal('hide')
Manu-manong nagtatago ng modal. Bumabalik sa tumatawag bago pa talaga naitago ang modal (ibig sabihin, bago hidden.bs.modalmangyari ang kaganapan).
.modal('handleUpdate')
Manu-manong muling ayusin ang posisyon ng modal kung ang taas ng isang modal ay nagbabago habang ito ay bukas (ibig sabihin, kung sakaling lumitaw ang isang scrollbar).
.modal('dispose')
Sinisira ang modal ng isang elemento.
Mga kaganapan
Ang modal class ng Bootstrap ay naglalantad ng ilang mga kaganapan para sa hooking sa modal functionality. Ang lahat ng modal na kaganapan ay pinapagana sa modal mismo (ibig sabihin, sa <div class="modal">).
Uri ng kaganapan
Paglalarawan
show.bs.modal
Agad na gagana ang kaganapang ito kapag showtinawag ang paraan ng instance. Kung sanhi ng isang pag-click, ang na-click na elemento ay magagamit bilang pag- relatedTargetaari ng kaganapan.
ipinapakita.bs.modal
Ang kaganapang ito ay pinapagana kapag ang modal ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS). Kung sanhi ng isang pag-click, ang na-click na elemento ay magagamit bilang pag- relatedTargetaari ng kaganapan.
hide.bs.modal
Agad na pinapagana ang kaganapang ito kapag hidetinawag na ang paraan ng instance.
hidden.bs.modal
Ang kaganapang ito ay papaganahin kapag ang modal ay tapos nang itago mula sa user (maghihintay na makumpleto ang mga transition ng CSS).