Whakamahia te monohiko JavaScript a Bootstrap ki te taapiri i nga korero ki to papaanga mo nga pouaka rama, nga whakamohiotanga a nga kaiwhakamahi, me nga ihirangi tino ritenga ranei.
Pehea te mahi
I mua i te tiimata me te waahanga tikanga a Bootstrap, kia mohio koe ki te panui i nga mea e whai ake nei na te mea kua huri nga whiringa tahua.
Ka hangaia nga tauira ki te HTML, CSS, me te JavaScript. Ka tuuhia ki runga ake i nga mea katoa o te tuhinga ka tango i te panuku mai i te pukapuka kia panuku te <body>ihirangi aratau.
Ma te panui i te "papamuri" ka kati aunoa i te ahua.
Ka tautokohia e Bootstrap tetahi matapihi aratau i ia wa. Kaore i te tautokohia nga tikanga kohanga na te mea e whakapono ana matou he ngoikore nga wheako kaiwhakamahi.
Ka whakamahia position: fixede nga tauira, he ahua motuhake mo tana whakaputanga. I nga wa katoa ka taea, tuuhia to HTML modal ki te taumata teitei kia kore ai e pokanoa mai i etahi atu huānga. Ka raru pea koe i te wa e kohanga ana .modali tetahi atu huānga kua whakaritea.
Ano ano, na te mea position: fixed, kei reira etahi whakatupato me te whakamahi i nga tikanga i runga i nga taputapu pūkoro. Tirohia a maatau tuhinga tautoko tirotiro mo nga taipitopito.
Na te ahua o te HTML5 e whakaatu ana i ona tohu, kaore he painga o te autofocushuanga HTML ki nga tikanga Bootstrap. Hei whakatutuki i taua paanga, whakamahia etahi ritenga JavaScript:
Kia mau ki te panui mo nga whakaaturanga me nga aratohu whakamahi.
Tauira
Nga waahanga motika
Kei raro nei he tauira aratau patekoposition ( ko tona tikanga displaykua whakakorehia). Kei roto ko te pane aratau, te tinana aratau (e hiahiatia ana mo padding), me te hiku aratau (he kowhiri). Ka tono matou kia whakaurua e koe nga pane aratau me nga mahi whakakore i nga wa katoa ka taea, me whakarato ranei i tetahi atu mahi whakakore.
taitara tikanga
Ko te kuputuhi tinana ka haere ki konei.
Demo ora
Takahurihia he whakaaturanga aratau mahi ma te paatene i te paatene kei raro nei. Ka paheke ki raro ka memeha mai i te tihi o te wharangi.
Modal title
Woohoo, you're reading this text in a modal!
Papamuri pateko
Ina tautuhia te papamuri ki te pateko, ka kore te aratau e kati ina paato ana ki waho. Patohia te paatene i raro nei hei whakamatau.
Modal title
I will not close if you click outside me. Don't even try to press escape key.
Te panuku i nga ihirangi roa
Ka roa rawa nga tikanga mo te tauranga tirohanga a te kaiwhakamahi, te taputapu ranei, ka panuku motuhake mai i te wharangi ake. Whakamātauria te demo i raro nei kia kite he aha te tikanga.
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.
Ka taea hoki e koe te hanga i tetahi aratau panuku ka taea te panuku i te tinana aratau ma te taapiri atu .modal-dialog-scrollableki te .modal-dialog.
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.
Pokapū poutū
Tāpirihia .modal-dialog-centeredki .modal-dialogte poutū poutū te aratau.
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.
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.
Whakamahia te punaha matiti Bootstrap i roto i te aratau ma te kohanga .container-fluidi roto i te .modal-body. Na, whakamahia nga karaehe punaha matiti noa penei i a koe ki hea atu.
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
Te rereke i nga ihirangi aratau
He paihere o nga patene e whakaoho ana i te ahua kotahi me nga ihirangi paku rereke? Whakamahia event.relatedTargetme nga huanga HTMLdata-* ( ma te jQuery pea ) ki te whakarereke i nga ihirangi o te tikanga i runga i te paatene i paatohia.
Kei raro ko te demo ora e whai ana i te tauira HTML me JavaScript. Mo etahi atu korero, panuihia nga tuhinga takahanga modal mo nga taipitopito mo relatedTarget.
New message
Huri hākoritanga
Ka $modal-fade-transformwhakatauhia e te taurangi te ahua o te huringa i .modal-dialogmua i te whakakorikori ahua memeha-i roto, ko te $modal-show-transformtaurangi ka whakatau i te huringa o .modal-dialogte mutunga o te hākoritanga memeha-i roto i te aratau.
Mena kei te pirangi koe hei tauira he hākoritanga topa-mai, ka taea e koe te whakarite $modal-fade-transform: scale(.8).
Tango hākoritanga
Mo nga tauira ka puta noa, kaua e memeha ki te tiro, tangohia te .fadekaraehe mai i to tohu tohu.
Te teitei hihiko
Mena ka huri te teitei o te aratau i te wa e tuwhera ana, me waea atu koe $('#myModal').modal('handleUpdate')ki te whakatika i te tuunga o te aratau mena ka puta he pae panuku.
Te urunga
Kia mahara ki te taapiri role="dialog"me aria-labelledby="..."te, tohutoro i te taitara aratau, ki te .modal, role="document"ki a .modal-dialogia ano. I tua atu, ka taea e koe te whakaatu i to korero korero mo aria-describedbyrunga i te .modal.
Te whakauru ataata YouTube
Ko te whakauru i nga riipene YouTube ki roto i nga tikanga ka hiahiatia he JavaScript taapiri kaore i Bootstrap hei aukati aunoa i te purei me etahi atu. Tirohia tenei panui Stack Overflow mo etahi atu korero.
Rahi whiriwhiri
E toru nga rahi o nga tauira, e waatea ana ma nga karaehe whakarereke hei whakanoho ki runga i te .modal-dialog. Ka whana enei rahi ki etahi waahi pakaru hei karo i nga pae panuku whakapae i runga i nga tauranga whaiti.
Rahi
Karaehe
Modal max-whanui
Iti
.modal-sm
300px
Taunoa
Karekau
500px
Nui
.modal-lg
800px
Nui atu
.modal-xl
1140px
Ko ta maatau aratau taunoa kaore he karaehe whakarereke ko te momo momo rahi "waenganui".
Extra large modal
...
Large modal
...
Momo iti
...
Whakamahinga
Ko te mono mono ka huri i to ihirangi huna i runga i te tono, ma nga huanga raraunga, JavaScript ranei. Ka taapiri atu ano .modal-openki te <body>ki te whakakore i te whanonga panuku taunoa me te whakaputa .modal-backdropi tetahi waahi paatoo mo te whakakore i nga tikanga kua whakaatuhia ina paato i waho o te aratau.
Ma nga huanga raraunga
Whakahohehia he tikanga me te kore e tuhi JavaScript. Whakatakotoria data-toggle="modal"ki runga i te huānga mana whakahaere, penei i te paatene, me te, ki te whai data-target="#foo"ranei href="#foo"i tetahi aratau motuhake hei takahuri.
Ma te JavaScript
Karangahia he tikanga me te id myModalme te rarangi kotahi o JavaScript:
Kōwhiringa
Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-backdrop="".
Ingoa
Momo
Taunoa
Whakaahuatanga
papamuri
boolean te aho ranei'static'
pono
Kei roto he huānga tauira-papamuri. Arā, whakapūtā staticmo te papamuri e kore e kati i te aratau i runga i te paato, i te pehi mawhiti ranei.
papapātuhi
boolean
pono
Ka kati i te aratau ina pehia te ki mawhiti
arotahi
boolean
pono
Ka tuu te aro ki te aratau ina arawhiti.
whakaatu
boolean
pono
Ka whakaatu i te aratau ina arawhiti.
Nga tikanga
Nga tikanga tukutahi me nga whakawhitinga
Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .
Whakahohehia to ihirangi hei aratau. Ka whakaae ki nga whiringa whiriwhiri object.
.modal('toggle')
Ka takahuri-a-ringa i te tikanga. Ka hoki ki te kaiwaea i mua i te whakaaturanga, i te hunanga ranei o te aratau (arā, i mua i te puta o shown.bs.modalte hidden.bs.modaltakahanga).
.modal('show')
Ka whakatuwhera a-ringa i te tikanga. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te tikanga (ara i mua i te shown.bs.modalputa o te takahanga).
.modal('hide')
Ka huna a-ringa i tetahi tikanga. Ka hoki ki te kaiwaea i mua i te hunanga o te tikanga (ara i mua i te hidden.bs.modalputa o te takahanga).
.modal('handleUpdate')
Whakaritea-a-ringa te tuunga o te aratau mena ka huri te teitei o te aratau i te wa e tuwhera ana (arā, mena ka puta he pae panuku).
.modal('dispose')
Ka whakakore i te ahua o te huānga.
Nga huihuinga
Ko te karaehe aratau a Bootstrap e whakaatu ana i etahi huihuinga mo te hono atu ki nga mahi tikanga. Ko nga huihuinga aratau katoa ka puhia ki te aratau ake (arā, i te <div class="modal">).
Momo Takahanga
Whakaahuatanga
show.bs.modal
Ka pupuhi tenei takahanga ina ka showkarangahia te aratuka tauira. Mena na te paato i pa, ka waatea te huānga kua paatohia hei relatedTargettaonga mo te huihuinga.
whakaaturia.bs.modal
Ka pupuhihia tenei takahanga i te wa i kitea ai te ahua ki te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS). Mena na te paato i pa, ka waatea te huānga kua paatohia hei relatedTargettaonga mo te huihuinga.
huna.bs.modal
Ka puhia tonutia tenei takahanga ina hidekua karangahia te aratuka tauira.
huna.bs.modal
Ka pupuhihia tenei takahanga ina mutu te hunanga o te tikanga mai i te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS).
hidePrevented.bs.modal
Ka pupuhihia tenei takahanga i te wa e whakaatuhia ana te aratau, tona papamuri staticme te paato i waho o te aratau, ka mahia ranei he perehi mawhiti.