Vim li cas HTML5 txhais nws cov semantics, HTML tus cwj pwm tsisautofocus muaj txiaj ntsig hauv Bootstrap modals. Txhawm rau ua tiav cov txiaj ntsig zoo ib yam, siv qee qhov kev cai JavaScript:
Khaws nyeem rau demos thiab cov lus qhia siv.
Piv txwv
Modal Cheebtsam
Hauv qab no yog ib qho piv txwv zoo li qub (lub ntsiab lus nws positionthiab displaytau dhau los). Xws li yog lub taub hau modal, modal lub cev (yuav tsum tau rau padding), thiab modal footer (yeem). Peb thov kom koj suav nrog cov ntsiab lus ntawm kev tso tawm thaum twg los tau, lossis muab lwm qhov kev tso tawm kom pom tseeb.
Modal npe
Modal lub cev ntawv mus ntawm no.
Nyob demo
Toggle ib tug ua hauj lwm modal demo los ntawm nias lub pob hauv qab no. Nws yuav swb thiab ploj mus los ntawm sab saum toj ntawm nplooj ntawv.
Modal title
Woohoo, you're reading this text in a modal!
Scrolling cov ntsiab lus ntev
Thaum modals ntev dhau los rau tus neeg siv qhov chaw saib lossis ntaus ntawv, lawv scroll ywj siab ntawm nplooj ntawv nws tus kheej. Sim cov demo hauv qab no kom pom tias peb txhais li cas.
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.
Vertical centered
Ntxiv .modal-dialog-centeredmus .modal-dialograu vertically center lub 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.
Siv lub Bootstrap kab sib chaws nyob rau hauv ib tug modal los ntawm nesting .container-fluidnyob rau hauv lub .modal-body. Tom qab ntawd, siv cov chav kawm kab ke ib txwm ua raws li koj xav tau nyob txhua qhov chaw.
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
Varying modal cov ntsiab lus
Muaj ib pawg ntawm cov nyees khawm uas txhua tus ua rau tib lub modal nrog cov ntsiab lus sib txawv me ntsis? Siv event.relatedTargetthiab HTML data-*cwj pwm (tejzaum nws ntawm jQuery ) kom sib txawv ntawm cov ntsiab lus ntawm lub modal nyob ntawm seb lub pob twg raug nias.
Hauv qab no yog qhov ua yeeb yaj kiab nyob ua raws li piv txwv HTML thiab JavaScript. Yog xav paub ntxiv, nyeem cov txheej xwm modal docs kom paub meej txog relatedTarget.
New message
<buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal"data-whatever="@mdo">Open modal for @mdo</button><buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal"data-whatever="@fat">Open modal for @fat</button><buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal"data-whatever="@getbootstrap">Open modal for @getbootstrap</button><divclass="modal fade"id="exampleModal"tabindex="-1"role="dialog"aria-labelledby="exampleModalLabel"aria-hidden="true"><divclass="modal-dialog"role="document"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title"id="exampleModalLabel">New message</h5><buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">×</span></button></div><divclass="modal-body"><form><divclass="form-group"><labelfor="recipient-name"class="col-form-label">Recipient:</label><inputtype="text"class="form-control"id="recipient-name"></div><divclass="form-group"><labelfor="message-text"class="col-form-label">Message:</label><textareaclass="form-control"id="message-text"></textarea></div></form></div><divclass="modal-footer"><buttontype="button"class="btn btn-secondary"data-dismiss="modal">Close</button><buttontype="button"class="btn btn-primary">Send message</button></div></div></div></div>
Tshem cov animation
Rau cov qauv uas tsuas yog tshwm sim ntau dua li ploj mus saib, tshem tawm cov .fadechav kawm los ntawm koj cov ntawv cim modal.
Qhib lub modal yam tsis tau sau JavaScript. Teem data-toggle="modal"rau ntawm tus tswj lub caij, zoo li lub pob, nrog rau ib data-target="#foo"lossis href="#foo"rau lub hom phiaj rau ib qho kev hloov pauv.
Ntawm JavaScript
Hu rau modal nrog id myModalnrog ib kab ntawm JavaScript:
Kev xaiv
Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-, xws li hauv data-backdrop="".
Lub npe
Hom
Default
Kev piav qhia
keeb kwm yav dhau
boolean los yog txoj hlua'static'
muaj tseeb
Xws li ib qho modal-backdrop element. Xwb, qhia meej staticrau ib qho backdrop uas tsis kaw lub modal ntawm nias.
keyboard
boolean
muaj tseeb
Kaw lub modal thaum khiav qhov tseem ceeb yog nias
tsom
boolean
muaj tseeb
Muab qhov tsom mus rau lub modal thaum pib.
ua yeeb yam
boolean
muaj tseeb
Qhia cov modal thaum pib.
Cov txheej txheem
Asynchronous txoj kev thiab kev hloov
Txhua txoj kev API yog asynchronous thiab pib hloov pauv . Lawv rov qab mus rau tus neeg hu xov tooj sai li sai tau thaum qhov kev hloov pauv pib tab sis ua ntej nws xaus . Tsis tas li ntawd, ib txoj kev hu rau ib qho kev hloov pauv yuav raug tsis quav ntsej .
Manually toggles ib modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau tshwm sim los yog zais (piv txwv li ua ntej qhov shown.bs.modalkev hidden.bs.modaltshwm sim tshwm sim).
.modal('show')
Manually qhib lub modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau tshwm sim tiag tiag (piv txwv li ua ntej qhov shown.bs.modalkev tshwm sim tshwm sim).
.modal('hide')
Manually hides ib modal. Rov qab mus rau tus neeg hu ua ntej lub modal tau muab zais tiag tiag (piv txwv li ua ntej qhov hidden.bs.modalxwm txheej tshwm sim).