Sebelisa mokhoa oa ho kenya JavaScript oa Bootstrap ho kenya lipuisano sebakeng sa hau sa marang-rang bakeng sa mabokose a khanyang, litsebiso tsa basebelisi, kapa litaba tse ikhethileng ka botlalo.
Kamoo e sebetsang kateng
Pele o qala ka karolo ea modal ea Bootstrap, etsa bonnete ba hore u bala tse latelang kaha likhetho tsa rona tsa menyetla li sa tsoa fetoha.
Li-modal li hahiloe ka HTML, CSS, le JavaScript. Li behiloe holim'a ntho e 'ngoe le e' ngoe e ka har'a tokomane 'me li tlose moqolo ho tsoa ho <body>e le hore litaba tsa modal li tsamaee.
Ho tobetsa "backdrop" ea modal ho tla koala modal ka bo eona.
Bootstrap e tšehetsa fensetere e le 'ngoe feela ka nako. Mekhoa e hlophisitsoeng ha e tšehetsoe kaha re lumela hore ha e na boiphihlelo ba basebelisi.
Li-modals li sebelisa position: fixed, tseo ka linako tse ling li ka bang tse khethehileng mabapi le phetolelo ea eona. Nako le nako ha ho khonahala, beha HTML ea hau ea modal sebakeng sa boemo bo holimo ho qoba tšitiso e ka bang teng ho tsoa linthong tse ling. U ka 'na ua tobana le mathata ha u theha sehlaha ka .modalhar'a ntho e' ngoe e tsitsitseng.
Ka lebaka la hore na HTML5 e hlalosa semantics ea eona joang, tšobotsi ea autofocusHTML ha e na phello ho mekhoa ea Bootstrap. Ho fihlela phello e tšoanang, sebelisa JavaScript e tloaelehileng:
Tsoela pele ho bala bakeng sa li-demos le litataiso tsa tšebeliso.
Mehlala
Likarolo tsa modal
Ka tlase ke mohlala o tsitsitseng oa modal (o bolelang hore o na positionle 'me displayo tlositsoe). Ho kenyelelitsoe hlooho ea modal, 'mele oa modal (ea hlokehang bakeng sa padding) le botlaaseng ba modal (boikhethelo). Re kopa hore o kenyeletse lihlooho tsa modal le liketso tsa ho qhala ha ho khonahala, kapa o fane ka ketso e 'ngoe e hlakileng ea ho qhala.
Sehlooho sa Modal
Sengoloa sa 'mele oa Modal se fihla mona.
Pontšo e phelang
Fetolela mokhoa oa ho sebetsa oa modal ka ho tobetsa konopo e ka tlase. E tla thellela fatše ebe e nyamela ho tloha holimo leqepheng.
Modal title
Woohoo, you're reading this text in a modal!
Boemo bo tsitsitseng
Ha bokamorao bo behiloe ho static, modal e ke ke ea koaloa ha u tobetse ka ntle ho eona. Tobetsa konopo e ka tlase ho e leka.
Modal title
I will not close if you click outside me. Don't even try to press escape key.
Ho tsamaisa litaba tse telele
Ha li-modal li nka nako e telele bakeng sa sebaka sa pono sa mosebelisi kapa sesebelisoa, li tsamaea li sa ipapise le leqephe ka bolona. Leka demo e ka tlase ho bona seo re se bolelang.
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.
U ka boela ua etsa modal e phutholohang e lumellang ho tsamaisa 'mele oa modal ka ho eketsa .modal-dialog-scrollableho .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.
E tsepamisitsoe holimo
Eketsa .modal-dialog-centeredho .modal-dialogmodal ho thea bohareng.
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.
Lisebelisoa le li-popovers
Lisebelisoa le li-popovers li ka kenngoa ka har'a mekhoa e hlokahalang. Ha li-modal li koetsoe, lisebelisoa life kapa life tsa popover tse ka hare le tsona li tlosoa ka bohona.
Sebelisa sistimi ea grid ea Bootstrap ka har'a modal ka ho haha .container-fluidka har'a .modal-body. Ebe u sebelisa litlelase tse tloaelehileng tsa grid joalo ka ha u ne u ka etsa kae kapa kae.
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
Likahare tse fapaneng tsa modal
Na u na le sehlopha sa likonopo tse hlahisang modal e tšoanang ka litaba tse fapaneng hanyane? Sebelisa event.relatedTargetle litšobotsi tsa HTMLdata-* (mohlomong ka jQuery ) ho fetola litaba tsa modal ho latela hore na konopo e tobetse.
Ka tlase ke demo e phelang e lateloang ke mohlala oa HTML le JavaScript. Ho fumana lintlha tse ling, bala litokomane tsa liketsahalo tsa modal bakeng sa lintlha tse mabapi le relatedTarget.
New message
Fetola animation
Phetoho $modal-fade-transforme etsa qeto ea boemo ba .modal-dialogpele ho animation ea modal fade-in, phetoho $modal-show-transforme etsa qeto ea phetoho .modal-dialogqetellong ea modal fade-in animation.
Haeba u batla mohlala animation ea katametso, u ka seta $modal-fade-transform: scale(.8).
Tlosa animation
Bakeng sa li-modal tse hlahang feela ho e-na le ho nyamela, tlosa .fadesehlopha ho li-modal markup tsa hau.
Bophahamo bo matla
Haeba bophahamo ba modal bo fetoha ha e ntse e butsoe, o lokela ho letsetsa $('#myModal').modal('handleUpdate')ho lokisa boemo ba modal haeba ho hlaha scrollbar.
Ho fihlella
Etsa bonnete ba ho eketsa aria-labelledby="...", ho supa sehlooho sa modal, ho .modal. Ho feta moo, o ka fana ka tlhaloso ea puisano ea hau ea modal le aria-describedbyon .modal. Hlokomela hore ha ho hlokahale hore u kenye role="dialog"kaha re se re e kentse ka JavaScript.
Ho kenyelletsa livideo tsa YouTube
Ho kenya livideo tsa YouTube ho li-modal ho hloka JavaScript e eketsehileng eseng ho Bootstrap ho emisa ho bapala le tse ling. Sheba poso ena e thusang ea Stack Overflow bakeng sa lintlha tse ling.
Boikhethelo ba boholo
Li-modal li na le mefuta e meraro ea boikhethelo, e fumanehang ka litlelase tsa ho fetola tse tla behoa ho .modal-dialog. Lisaese tsena li kenella ka linako tse ling ho qoba mekoallo e tšekaletseng maema-kepeng a manyane.
Boholo
Sehlopha
Modal max-width
Nyenyane
.modal-sm
300px
Ea kamehla
Ha ho letho
500px
E kholoanyane
.modal-lg
800px
E kholo ho feta
.modal-xl
1140px
Modal ea rona ea kamehla ntle le sehlopha sa mofetoleli e etsa "bohareng" ba boholo.
Extra large modal
...
Large modal
...
Small modal
...
Tšebeliso
Modal plugin e fetola litaba tsa hau tse patiloeng ha li batloa, ka likarolo tsa data kapa JavaScript. E boetse e ekelletsa .modal-openho <body>tloleng boits'oaro ba kamehla ba ho phutha 'me e hlahisa .modal-backdropho fana ka sebaka sa ho tobetsa bakeng sa ho leleka mekhoa e bontšitsoeng ha o tobetsa ka ntle ho modal.
Ka litšobotsi tsa data
Kenya modal ntle le ho ngola JavaScript. Beha data-toggle="modal"karolo ea taolo, joalo ka konopo, hammoho le data-target="#foo"kapa href="#foo"ho shebisa mokhoa o itseng oa ho fetola.
Ka JavaScript
Letsetsa modal ka id myModale nang le mola o le mong oa JavaScript:
Dikgetho
Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-backdrop="".
Lebitso
Mofuta
Ea kamehla
Tlhaloso
bokamorao
boolean kapa khoele'static'
'nete
E kenyelletsa karolo ea modal-backdrop. Ntle le moo, hlakisa staticboemo ba morao-rao bo sa koaheleng mokhoa oa ho tobetsa.
keyboard
boolean
'nete
E koala modal ha konopo ea escape e tobetsoa
tsepamisa maikutlo
boolean
'nete
E tsepamisa maikutlo ho modal ha e qala.
bontsha
boolean
'nete
E bonts'a modal ha e qala.
Mekhoa
Mekhoa ea Asynchronous le liphetoho
Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .
E kenya tšebetsong litaba tsa hau joalo ka mokhoa. E amohela khetho ea boikhethelo object.
.modal('toggle')
E fetola modal ka letsoho. E kgutlela ho motho ya letsetsang pele modal e bontshwa kapa e patilwe (ke hore pele ketsahalo shown.bs.modalkapa hidden.bs.modalketsahalo e etsahala).
.modal('show')
E bula modal ka letsoho. E khutlela ho motho ea letselitseng pele mokha o bonts'oa (ke hore pele shown.bs.modalketsahalo e etsahala).
.modal('hide')
E pata modal ka letsoho. E khutlela ho motho ea letselitseng pele mohale o patiloe (ke hore pele hidden.bs.modalketsahalo e etsahala).
.modal('handleUpdate')
Ka bouena fetola boemo ba modal haeba bophahamo ba modal bo fetoha ha e ntse e butse (ke hore haeba ho hlaha scrollbar).
.modal('dispose')
E senya modal oa element.
Liketsahalo
Sehlopha sa modal sa Bootstrap se pepesa liketsahalo tse 'maloa tsa ho hokahana le ts'ebetso ea modal. Liketsahalo tsohle tsa modal li lelekoa ho modal ka boeona (ke hore ho <div class="modal">).
Mofuta oa Ketsahalo
Tlhaloso
show.bs.modal
Ketsahalo ena e tuka hang hang ha showmokhoa oa mohlala o bitsoa. Haeba e bakoa ke ho tobetsa, ntho e tobelitsoeng e fumaneha e le relatedTargetthepa ea ketsahalo.
e bonts'itsoeng.bs.modal
Ketsahalo ena e ts'oaroa ha modal e entsoe hore e bonahale ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). Haeba e bakoa ke ho tobetsa, ntho e tobelitsoeng e fumaneha e le relatedTargetthepa ea ketsahalo.
pata.bs.modal
Ketsahalo ena e lelekoa hang hang ha hidemokhoa oa mohlala o bitsoa.
patiloeng.bs.modal
Ketsahalo ena e tlosoa ha modal e qeta ho patoa ho mosebedisi (e tla emela hore liphetoho tsa CSS li phethehe).
pataThibeloa.bs.modal
Ketsahalo ena e ts'oaroa ha modal e bonts'oa, bokamorao ba eona ke static'me ho tobetsa ka ntle ho modal kapa ho tobetsa konopo ea ho baleha ho etsoa ka khetho ea keyboard kapa data-keyboardho hlophisoa ho false.