Úsáid breiseán módúil JavaScript Bootstrap chun dialóga a chur le do shuíomh le haghaidh boscaí solais, fógraí úsáideoirí, nó ábhar atá go hiomlán saincheaptha.
Conas a oibríonn sé
Sula dtosaíonn tú le comhpháirt mhódúil Bootstrap, bí cinnte an méid seo a leanas a léamh mar go bhfuil ár roghanna roghchláir athraithe le déanaí.
Tógtar modhanna le HTML, CSS, agus JavaScript. Tá siad suite thar gach rud eile sa doiciméad agus bain an scrolla as an <body>ionas go scrollaíonn ábhar modha ina ionad.
Má chliceálann tú ar an “cúlra” módúil, dúnfar an modúl go huathoibríoch.
Ní thacaíonn Bootstrap ach fuinneog mhódúil amháin ag an am. Ní thacaítear le módúil neadaithe mar creidimid gur droch-eispéiris úsáideoirí iad.
Úsáideann modhanna position: fixed, rud a d'fhéadfadh a bheith beagán faoi leith uaireanta faoina rindreáil. Nuair is féidir, cuir do HTML módúil i suíomh barrleibhéil chun cur isteach féideartha ó eilimintí eile a sheachaint. Is dócha go mbeidh fadhbanna agat agus tú ag neadú .modallaistigh d’eilimint sheasta eile.
Mar gheall ar an gcaoi a sainmhíníonn HTML5 a shéimeantaic, níl aon éifeacht ag an autofocustréith HTML i módúil Bootstrap. Chun an éifeacht chéanna a bhaint amach, bain úsáid as roinnt JavaScript saincheaptha:
Lean ort ag léamh le haghaidh taispeána agus treoirlínte úsáide.
Samplaí
Comhpháirteanna módúla
Anseo thíos tá sampla módúil statachposition (a chiallaíonn go bhfuil sé agus displaygur sáraíodh é). San áireamh tá an ceanntásc módúil, an corp módúil (riachtanach le haghaidh padding), agus buntásc módúil (roghnach). Iarraimid ort ceanntásca módúla a chur san áireamh le gníomhartha dífhostaithe nuair is féidir, nó gníomh dífhostú sainráite eile a sholáthar.
Teideal módúil
Téann téacs corp módúil anseo.
Taispeántas beo
Scoránaigh taispeána modha oibre trí chliceáil ar an gcnaipe thíos. Sleamhnóidh sé síos agus céimnithe isteach ó bharr an leathanaigh.
Teideal módúil
Woohoo, tá tú ag léamh an téacs seo i modúl!
Cúlra statach
Nuair a bheidh an cúlra socraithe go statach, ní dhúnfaidh an modúl nuair a chliceálann sé lasmuigh air. Cliceáil ar an gcnaipe thíos chun triail a bhaint as.
Teideal módúil
I will not close if you click outside me. Don't even try to press escape key.
Scrollaigh ábhar fada
Nuair a éiríonn módúil rófhada le haghaidh radharc nó gléas an úsáideora, scrollaíonn siad neamhspleách ar an leathanach féin. Bain triail as an taispeántas thíos a fheiceáil cad atá i gceist againn.
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.
Is féidir leat modha inscrollaithe a chruthú freisin a cheadaíonn scrollú ar an gcorp módúil trí chur .modal-dialog-scrollablele .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.
Ingearach lárnach
Cuir .modal-dialog-centeredle .modal-dialoglár an mhódúil go hingearach.
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.
Leideanna uirlisí agus popovers
Is féidir leideanna uirlisí agus popovers a chur laistigh de mhódúil mar is gá. Nuair a dhúntar módúil, déantar aon leideanna uirlisí agus popovers laistigh díobh a dhíbhe go huathoibríoch freisin.
Bain úsáid as córas eangaí Bootstrap laistigh de mhódúil trí neadú .container-fluidlaistigh den .modal-body. Ansin, bain úsáid as na gnáthranganna córais eangaí mar a dhéanfá áit ar bith eile.
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
Ábhar modha éagsúil
An bhfuil braon cnaipí agat a spreagann an modh céanna agus a bhfuil ábhair beagán difriúil acu? Úsáid event.relatedTargetagus tréithe HTML ( data-*trí jQuery b'fhéidir ) chun inneachar an mhódúil a athrú ag brath ar an gcnaipe ar a ndearnadh cliceáil.
Anseo thíos tá taispeántas beo agus HTML agus JavaScript mar shampla. Le haghaidh tuilleadh faisnéise, léigh na doiciméid um imeachtaí módúla le haghaidh sonraí ar relatedTarget.
New message
Athraigh beochan
Cinneann an t- $modal-fade-transformathróg an staid claochlaithe .modal-dialogroimh an beochan céimnithe módúil, $modal-show-transformsocraíonn an athróg an claochlú .modal-dialogag deireadh na beochana modha céimnithe-i.
Más mian leat mar shampla beochan súmáil isteach, is féidir leat $modal-fade-transform: scale(.8).
Bain beochan
Le haghaidh módúil atá le feiceáil go simplí seachas céimnithe isteach chun amharc, bain an .faderang de do mharcáil módúil.
Airde dinimiciúil
Má athraíonn airde módúil agus é oscailte, ba cheart duit glaoch $('#myModal').modal('handleUpdate')chun suíomh an mhódúil a athcheartú ar eagla go bhfeicfear scrollbharra.
Inrochtaineacht
Bí cinnte suimiú role="dialog"agus aria-labelledby="...", ag tagairt don teideal módúil, le .modal, agus role="document"leis an teideal .modal-dialogféin. Ina theannta sin, is féidir leat cur síos a dhéanamh ar do dialóg mhodhúil agus aria-describedbyar .modal.
Físeáin YouTube a neadú
Chun físeáin YouTube a leabú i módúil tá gá le JavaScript breise nach bhfuil i Bootstrap chun athsheinm agus níos mó a stopadh go huathoibríoch. Féach ar an bpostáil cabhrach Stack Overflow seo le haghaidh tuilleadh eolais.
Méideanna roghnacha
Tá trí mhéid roghnacha ag na modúil, ar fáil trí ranganna mionathraithe le cur ar .modal-dialog. Tosaíonn na méideanna seo ag brisphointí áirithe chun barraí scrollbharra cothrománacha ar phoirt amhairc níos cúinge a sheachaint.
Méid
Aicme
Leithead uasta módúil
Beaga
.modal-sm
300px
Réamhshocrú
Dada
500px
Mór
.modal-lg
800px
Breise mór
.modal-xl
1140px
Is é ár modh réamhshocraithe gan modhnóirí aicme modha an “mheánmhéide”.
Extra large modal
...
Large modal
...
Small modal
...
Úsáid
Scoránaigh an breiseán modha d’inneachar folaithe ar éileamh, trí tréithe sonraí nó JavaScript. Cuireann sé freisin .modal-openleis an <body>iompar scrollaithe réamhshocraithe a shárú agus gineann sé .modal-backdropa chun limistéar cliceáil a sholáthar chun módúil a thaispeántar a dhíbhe nuair a chliceálann tú lasmuigh den mhodh.
Trí tréithe sonraí
Modúl a ghníomhachtú gan JavaScript a scríobh. Socraigh data-toggle="modal"ar eilimint rialtóra, cosúil le cnaipe, mar aon le data-target="#foo"nó href="#foo"chun díriú ar mhodh sonrach chun scoránaigh.
Trí JavaScript
Glaoigh ar mhódúil le id myModalle líne amháin JavaScript:
Roghanna
Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-backdrop="".
Ainm
Cineál
Réamhshocrú
Cur síos
chúlra
Boole nó an téad'static'
fíor
Áirítear eilimint mhodúil chúlra. Mar mhalairt air sin, sonraigh staticle haghaidh cúlra nach ndúnann an modúl ar chliceáil nó ar an eochair éalaithe brúigh.
méarchlár
Boole
fíor
Dúnann sé an modúl nuair a bhrúitear eochair éalaithe
fócas
Boole
fíor
Cuireann sé an fócas ar an modha nuair a thosaigh sé.
seó
Boole
fíor
Taispeánann sé an modha nuair a thosaigh sé.
Modhanna
Modhanna agus aistrithe asincrónacha
Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir a luaithe a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé . Ina theannta sin, ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .
Gníomhachtaíonn d'ábhar mar mhodh modúl. Glacann rogha roghnach object.
.modal('toggle')
Scoránaigh modúl de láimh. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an modúl (.i. sula dtarlaíonn an shown.bs.modalnó an teagmhas).hidden.bs.modal
.modal('show')
Osclaíonn modúl de láimh. Filleann sé ar an nglaoiteoir sula dtaispeántar an modúl iarbhír (.i. sula shown.bs.modaldtarlaíonn an teagmhas).
.modal('hide')
Folaigh modúl de láimh. Filleann sé ar an nglaoiteoir sula gcuirtear an modh i bhfolach (ie sula hidden.bs.modaldtarlaíonn an teagmhas).
.modal('handleUpdate')
Déan suíomh an mhódúil a athcheartú de láimh má athraíonn airde an mhódúil agus é oscailte (ie ar eagla go bhfeictear scrollbharra).
.modal('dispose')
Scriosann modhúil eilimint.
Imeachtaí
Nochtann rang modha Bootstrap roinnt imeachtaí chun dul i ngleic le feidhmiúlacht mhódúil. Cuirtear na himeachtaí módúla go léir chun cinn ag an modúl féin (.i. ag an <div class="modal">).
Cineál Imeachta
Cur síos
taispeáin.bs.módúil
Téann an teagmhas seo chun solais láithreach nuair showa ghlaoitear an modh ásc. Más cliceáil is cúis leis, tá an eilimint chliceáilte ar fáil mar relatedTargetairí an imeachta.
léirithe.bs.modal
Cuirtear an teagmhas seo ar ceal nuair a bheidh an modúl infheicthe don úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). Más cliceáil is cúis leis, tá an eilimint chliceáilte ar fáil mar relatedTargetairí an imeachta.
folaigh.bs.módúil
Cuirtear an teagmhas seo ar ceal láithreach nuair a bhíonn an hidemodh ásc glaoite.
i bhfolach.bs.modal
Tá an teagmhas seo bréan nuair a bhíonn an mód críochnaithe á chur i bhfolach ón úsáideoir (fanfaidh sé go mbeidh aistrithe CSS le cur i gcrích).
hidePrevented.bs.modal
Cealaítear an teagmhas seo nuair a thaispeántar an modúl, tá a chúlra staticagus cliceáil lasmuigh den mhodh nó nuair a dhéantar brúigh eochair éalaithe.