Hafi nàdze Bootstrap ƒe modal component gɔme la, kpɔ egbɔ be yexlẽ nusiwo gbɔna elabena míaƒe menu ƒe tiatiawɔblɔɖewo trɔ nyitsɔ laa.
Wotsɔ HTML, CSS, kple JavaScript tua mɔnuwo. Woɖo wo ɖe nu bubu ɖesiaɖe dzi le nuŋlɔɖia me eye woɖea agbalẽxatsaxatsa ɖa le la me <body>ale be modal emenyawo naʋuʋu boŋ.
Ne èzi modal “backdrop” dzi la, axe modal la le eɖokui si.
Bootstrap doa alɔ modal fesre ɖeka ko le ɣeyiɣi ɖeka me. Womedoa alɔ nested modals o elabena míexɔe se be wonye zãla ƒe nuteƒekpɔkpɔ gbegblẽwo.
Modals zãa position: fixed, si ate ŋu anye etɔxɛ vie ɣeaɖewoɣi le eƒe gɔmeɖeɖe ŋu. Ɣesiaɣi si wòanya wɔ la, da wò modal HTML ɖe teƒe si le dziƒo be nàƒo asa na nusiwo ate ŋu ado kplamatse nu bubuwo. Anɔ eme be àdo go kuxiwo ne èle atɔ wɔm .modalle nu bubu si woɖo ɖi me.
Le afisia hã la, le position: fixed, nuxlɔ̃ame aɖewo li le modals zazã le asitelefonwo dzi ŋu. Kpɔ míaƒe browser support docs hena numeɖeɖe bubuwo.
Le alesi HTML5 ɖea eƒe gɔmesese gɔmee ta la, HTML autofocusnɔnɔmea mekpɔa ŋusẽ aɖeke ɖe Bootstrap modals dzi o. Be nàkpɔ ŋusẽ ma ke la, zã JavaScript aɖewo siwo wowɔ ɖe ɖoɖo nu:
Yi edzi nànɔ nu xlẽm hena wɔwɔfiawo kple zazã ŋuti mɔfiamewo.
Kpɔɖeŋuwo
Modal ƒe akpa aɖewo
Le ete la, static modal kpɔɖeŋu (si gɔmee nye eƒe positionkple displaywoɖe asi le wo ŋu). Nusiwo le emee nye modal ta, modal ŋutilã (si hiã na padding), kple modal afɔti (si nye tiatia). Míele biabiam be nàde modal headers kple dismiss actions ɣesiaɣi si wòanya wɔ, alo nàna dismiss action bubu si me kɔ.
Modal ƒe tanya
Modal ŋutilã nuŋɔŋlɔ yi afisia.
Live demo ƒe wɔwɔfia
Trɔ asi le modal demo si le dɔ wɔm ŋu to asiƒoƒo ɖe dzesi si le ete la dzi. Aɖiɖi ɖe anyi eye wòaɖiɖi tso axaa tame.
Modal ƒe tanya
Woohoo, èle nuŋɔŋlɔ sia xlẽm le modal me!
Static megbenyawo
Ne woɖo backdrop ɖe static dzi la, modal la matu ne èzi edzi le egodo o. Zi dzesi si le ete dzi be nàtee kpɔ.
Modal ƒe tanya
Nyematu ne èzi nye gota o. Mègadze agbagba gɔ̃ hã be yeazi escape key dzi o.
Nyatakaka didiwo ʋuʋu
Ne modals didi akpa na zãla ƒe nukpɔkpɔ alo mɔ̃a la, woʋua axaa ŋutɔ le wo ɖokui si. Te demo si le ete la kpɔ be nàkpɔ nusi míedi be yeagblɔ.
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.
Àteŋu awɔ modal si woateŋu aʋuʋu hã si ana nàʋu modal ƒe ŋutilã to etsɔtsɔ kpe .modal-dialog-scrollableɖe .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.
Le titina le tsitrenu
Tsɔe kpe ɖe eŋu .modal-dialog-centeredbe .modal-dialogwòaɖo modal la titina le tsitrenu.
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.
Dɔwɔnu ƒe aɖaŋuɖoɖowo kple popovers
Woate ŋu atsɔ dɔwɔnu ƒe aɖaŋuɖoɖowo kple popovers ade modals me ne ehiã. Ne wotu modals la, woɖea dɔwɔnu ƒe aɖaŋuɖoɖo ɖesiaɖe kple popovers ɖesiaɖe si le eme hã ɖa le eɖokui si.
Zã Bootstrap grid system le modal me to nesting .container-fluidle .modal-body. Emegbe, zã grid system ƒe klass siwo sɔ la abe alesi nàwɔe le teƒe bubu ɖesiaɖe ene.
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
Modal ƒe emenyawo ƒe tɔtrɔ
Ðe abɔtawo ƒe ha aɖe si katã ʋãa modal ɖeka si me emenyawo to vovo vie la le asiwòa? Zã event.relatedTargetkple HTML data-*nɔnɔmewo (ɖewohĩ to jQuery dzi ) tsɔ trɔ asi le modal la me nyawo ŋu le abɔta si dzi wozi nu.
Le ete la, live demo si kplɔe ɖo kple kpɔɖeŋu HTML kple JavaScript. Ne èdi nyatakaka bubuwo la, xlẽ modal events docs hena numeɖeɖe tsitotsito le relatedTarget.
Ne èdi le kpɔɖeŋu me, woawɔ nɔnɔmetata si woate ŋu adzi ɖe edzi la, àte ŋu aɖo $modal-fade-transform: scale(.8).
Ðe nɔnɔmetata siwo me woɖea nɔnɔmetatawo le la ɖa
Le modals siwo dzena ko tsɔ wu be woadzo le eme be woakpɔ la, ɖe .fadeklass la ɖa le wò modal markup la me.
Kɔkɔme siwo ŋu ŋusẽ le
Ne modal ƒe kɔkɔme trɔ esime wòle ʋuʋu la, ele be nàyɔ $('#myModal').modal('handleUpdate')be nàtrɔ asi le modal la ƒe nɔƒe ŋu nenye be agbalẽxatsaxatsa aɖe adze.
Modals ƒe lolome etɔ̃ le wo ɖokui si, siwo li to modifier classes dzi be woatsɔ ade .modal-dialog. Agbɔsɔsɔ siawo dzea egɔme le teƒe aɖewo be woaƒo asa na agbalẽxatsaxatsa siwo le tsia dzi le nukpɔkpɔ siwo le gbadzaa wu dzi.
Lolome
Nusrɔ̃ƒe
Modal max-kekeme ƒe didime
Sue
.modal-sm
300px
Gᴐmedzeƒe
Ɖeke o
500px
Lolo
.modal-lg
800px
Wololo akpa
.modal-xl
1140px
Míaƒe default modal si me modifier ƒe hatsotso mele o la nye “medium” size modal.
Extra large modal
...
Large modal
...
Small modal
...
Zãzã
Modal plugin la trɔa wò nyatakaka ɣaɣlawo ne wobiae, to nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Egatsɔa kpe .modal-openɖe <body>be woaɖe asi le ʋuʋudedi ƒe nuwɔna si woɖo ɖi ŋu eye wòwɔa a .modal-backdropbe woana teƒe si woate ŋu aƒo nu le hena asiɖeɖe le modals siwo woɖe fia ŋu ne wole ʋuʋum le modal la godo.
To nyatakaka ƒe nɔnɔmewo dzi
Wɔ modal aɖe ŋudɔ JavaScript maŋlɔ o. Ðoe data-toggle="modal"ɖe dziɖunu ƒe akpa aɖe dzi, abe abɔta ene, kpakple data-target="#foo"alo href="#foo"be nàɖo taɖodzinu na modal aɖe koŋ be wòatrɔ.
To JavaScript dzi
Yɔ modal si si id myModalle kple JavaScript ƒe fli ɖeka:
Tiatiawɔblɔɖewo
Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-backdrop="".
Ŋkɔ
Ƒomevi
Gᴐmedzeƒe
Nuɖᴐɖᴐ
megbenyawo
boolean alo kaƒoƒoa'static'
nyateƒe
Modal-backdrop ƒe akpa aɖe hã le eme. Alo, gblɔ staticna megbenya si metua modal la le click alo le escape key press me o.
keyboard dzi
boolean ƒe ƒuƒoƒo
nyateƒe
Doa modal la ne wozi escape key dzi
nu kpɔkpɔ
boolean ƒe ƒuƒoƒo
nyateƒe
Etsɔa susu ɖoa modal la ŋu ne wodze egɔme.
ɖe fia
boolean ƒe ƒuƒoƒo
nyateƒe
Fia modal la ne wodze egɔme.
Mɔnuwo
Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo
API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .
Ewɔa wò nyatakakawo ŋudɔ abe modal ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.
.modal('toggle')
Asitɔtrɔ le modal aɖe ŋu. Trɔ yi yɔla gbɔ hafi woɖe modal la fia ŋutɔŋutɔ alo ɣlae (si nye hafi shown.bs.modalalo hidden.bs.modalnudzɔdzɔa nadzɔ).
.modal('show')
Eʋua modal aɖe kple asi. Trɔ yi yɔla gbɔ hafi woɖe modal la fia ŋutɔŋutɔ (si nye hafi shown.bs.modalnudzɔdzɔa nadzɔ).
.modal('hide')
Asi ɣlaa modal aɖe. Trɔ yi yɔla gbɔ hafi woɣla modal la ŋutɔŋutɔ (si nye hafi hidden.bs.modalnudzɔdzɔa nadzɔ).
.modal('handleUpdate')
Trɔ asi le modal ƒe nɔƒe ŋu kple asi ne modal ƒe kɔkɔme trɔ esime wòle ʋuʋu (si fia nenye be agbalẽxatsaxatsa aɖe dze).
.modal('dispose')
Egblẽa nu le element aɖe ƒe modal ŋu.
Nudzɔdzɔwo
Bootstrap ƒe modal klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe modal dɔwɔwɔ me. Woda tu modal nudzɔdzɔwo katã ɖe modal la ŋutɔ dzi (si nye le <div class="modal">).
Nudzɔdzɔ Ƒomevi
Nuɖᴐɖᴐ
ɖee fia.bs.modal
Nudzɔdzɔ sia doa dzo enumake ne woyɔ showkpɔɖeŋu mɔnu la. Ne ʋuʋu gbɔe wòtso la, nusi wozi la li abe relatedTargetnudzɔdzɔa ƒe nɔnɔme ene.
woɖe fia.bs.modal
Woɖea nudzɔdzɔ sia ɖa ne wowɔ modal la be wòadze na zãla (alala be CSS ƒe tɔtrɔwo nawu enu). Ne ʋuʋu gbɔe wòtso la, nusi wozi la li abe relatedTargetnudzɔdzɔa ƒe nɔnɔme ene.
ɣla.bs.modal
Woɖea nudzɔdzɔ sia ɖa enumake ne woyɔ hideinstance mɔnu la.
ɣaɣla.bs.modal
Woɖea nudzɔdzɔ sia ne wowu modal la ɣla ɖe zãla la nu (alala be CSS ƒe tɔtrɔwo nawu enu).
hideWoxe mɔ ɖe enu.bs.modal
Wodoa nudzɔdzɔ sia ne woɖe modal la fia, eƒe megbenyawo nye staticeye wowɔ ʋuʋu le modal la godo alo sisi ƒe safui aɖe teti.