Lo ohun itanna modal JavaScript Bootstrap lati ṣafikun awọn ibaraẹnisọrọ si aaye rẹ fun awọn apoti ina, awọn iwifunni olumulo, tabi akoonu aṣa patapata.
Bawo ni o ṣe n ṣiṣẹ
Ṣaaju ki o to bẹrẹ pẹlu paati modal Bootstrap, rii daju lati ka atẹle bi awọn aṣayan akojọ aṣayan wa ti yipada laipẹ.
Awọn awoṣe jẹ itumọ pẹlu HTML, CSS, ati JavaScript. Wọn wa ni ipo lori ohun gbogbo miiran ninu iwe naa ki o yọ yi lọ kuro ni <body>ki akoonu modal yi lọ dipo.
Tite lori modal “backdrop” yoo pa modal naa laifọwọyi.
Bootstrap nikan ṣe atilẹyin window modal kan ni akoko kan. Awọn awoṣe itẹle ko ni atilẹyin bi a ṣe gbagbọ pe wọn jẹ awọn iriri olumulo ti ko dara.
Modals lilo position: fixed, eyi ti o le ma jẹ kan bit pato nipa awọn oniwe- Rendering. Nigbakugba ti o ṣee ṣe, gbe HTML modal rẹ si ipo ipele oke lati yago fun kikọlu agbara lati awọn eroja miiran. O ṣee ṣe ki o lọ sinu awọn ọran nigbati o ba n gbe ile kan .modallaarin eroja ti o wa titi miiran.
Lekan si, nitori position: fixed, nibẹ ni o wa diẹ ninu awọn caveats pẹlu lilo modals lori awọn ẹrọ alagbeka. Wo awọn iwe atilẹyin ẹrọ aṣawakiri wa fun awọn alaye.
Nitori bi HTML5 ṣe n ṣalaye awọn itumọ-ọrọ rẹ, ẹda autofocusHTML ko ni ipa ni awọn awoṣe Bootstrap. Lati ṣaṣeyọri ipa kanna, lo diẹ ninu JavaScript aṣa:
Jeki kika fun demos ati awọn ilana lilo.
Awọn apẹẹrẹ
Modal irinše
Ni isalẹ jẹ apẹẹrẹ modal aimi (itumọ rẹ positionati displaype o ti bori). To wa pẹlu akọsori modal, ara modal (ti a beere fun padding), ati ẹlẹsẹ modal (aṣayan). A beere pe ki o pẹlu awọn akọle modal pẹlu awọn iṣe yiyọ kuro nigbakugba ti o ṣee ṣe, tabi pese igbese ifasilẹ gbangba miiran.
Modal akọle
Modal body ọrọ lọ nibi.
Live demo
Yi demo modal ṣiṣẹ nipa tite bọtini ni isalẹ. Yoo rọra si isalẹ ati ipare ni lati oke ti oju-iwe naa.
Modal title
Woohoo, you're reading this text in a modal!
Yi lọ akoonu gun
Nigbati awọn awoṣe ba gun ju fun wiwo olumulo tabi ẹrọ, wọn yi lọ ni ominira ti oju-iwe naa funrararẹ. Gbiyanju demo ni isalẹ lati wo kini a tumọ si.
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.
Ni inaro aarin
Fi .modal-dialog-centeredsi .modal-dialoginaro aarin 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.
Tooltips ati popovers
Awọn imọran irinṣẹ ati awọn agbejade le wa ni gbe laarin awọn modal bi o ṣe nilo. Nigbati modals ti wa ni pipade, eyikeyi awọn imọran irinṣẹ ati awọn agbejade laarin tun jẹ yọkuro laifọwọyi.
Lo eto akoj Bootstrap laarin modal nipasẹ itẹ-ẹiyẹ .container-fluidlaarin .modal-body. Lẹhinna, lo awọn kilasi eto akoj deede bi o ṣe le nibikibi miiran.
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
Akoonu modal ti o yatọ
Ni opo ti awọn bọtini ti gbogbo awọn okunfa kanna modal pẹlu die-die o yatọ si awọn akoonu? Lo event.relatedTargetati awọn abuda HTMLdata-* (o ṣee ṣe nipasẹ jQuery ) lati ṣe iyatọ awọn akoonu ti modal da lori bọtini wo ni o tẹ.
Ni isalẹ ni demo ifiwe kan atẹle nipa apẹẹrẹ HTML ati JavaScript. Fun alaye diẹ sii, ka awọn docs awọn iṣẹlẹ modal fun awọn alaye lori relatedTarget.
New message
Yọ iwara kuro
Fun awọn awoṣe ti o han nirọrun kuku ju ipare sinu lati wo, yọ .fadekilasi kuro lati isamisi modal rẹ.
Awọn giga ti o ni agbara
Ti giga modal ba yipada lakoko ti o wa ni sisi, o yẹ ki o pe $('#myModal').modal('handleUpdate')lati tun ipo ipo modal ṣe ni ọran ti lilọ kiri ba han.
Wiwọle
Rii daju lati ṣafikun role="dialog"ati aria-labelledby="...", tọka akọle modal, si .modal, ati role="document"si .modal-dialogfunrararẹ. Ni afikun, o le fun ni apejuwe ti ibaraẹnisọrọ modal rẹ pẹlu aria-describedbylori .modal.
Ifisinu YouTube awọn fidio
Ifisinu awọn fidio YouTube ni awọn awoṣe nilo afikun JavaScript kii ṣe ni Bootstrap lati da ṣiṣiṣẹsẹhin duro laifọwọyi ati diẹ sii. Wo ifiweranṣẹ Stack Overflow ti o ṣe iranlọwọ fun alaye diẹ sii.
Awọn iwọn iyan
Modals ni awọn iwọn iyan meji, wa nipasẹ awọn kilasi modifier lati gbe sori faili .modal-dialog. Awọn iwọn wọnyi tapa ni awọn aaye isinmi kan lati yago fun awọn yiyi ti petele lori awọn iwoye ti o dín.
Large modal
...
Small modal
...
Lilo
Ohun itanna modal yi akoonu ti o farapamọ pada lori ibeere, nipasẹ awọn abuda data tabi JavaScript. O tun ṣe afikun .modal-opensi <body>lati bori ihuwasi yiyi lọ aiyipada ati ṣe ipilẹṣẹ kan .modal-backdroplati pese agbegbe tẹ kan fun yiyọ awọn awoṣe ti o han nigbati titẹ si ita modal.
Nipasẹ awọn abuda data
Mu modal ṣiṣẹ laisi kikọ JavaScript. Ṣeto data-toggle="modal"lori eroja oludari, bii bọtini kan, pẹlu kan data-target="#foo"tabi href="#foo"lati fojusi modal kan pato lati yi.
Nipasẹ JavaScript
Pe modal pẹlu id myModalpẹlu laini JavaScript kan:
Awọn aṣayan
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-, bi ninu data-backdrop="".
Oruko
Iru
Aiyipada
Apejuwe
sile
boolian tabi okun'static'
ooto
Pẹlu a modal-backdrop ano. Ni omiiran, pato staticfun ẹhin ẹhin eyiti ko pa modal naa ni titẹ.
keyboard
boolian
ooto
Tilekun modal nigbati o ba tẹ bọtini ona abayo
idojukọ
boolian
ooto
Fi idojukọ lori modal nigba ti ipilẹṣẹ.
ifihan
boolian
ooto
Ṣe afihan modal nigbati o bẹrẹ.
Awọn ọna
Awọn ọna Asynchronous ati awọn iyipada
Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .
Mu akoonu rẹ ṣiṣẹ bi modal. Gba awọn aṣayan iyan object.
.modal('toggle')
Pẹlu ọwọ yipada modal kan. Pada si olupe ṣaaju ki modal ti han gangan tabi farapamọ (ie ṣaaju ki iṣẹlẹ shown.bs.modaltabi hidden.bs.modaliṣẹlẹ waye).
.modal('show')
Pẹlu ọwọ ṣii modal kan. Pada si olupe ṣaaju ki modal ti han gangan (ie ṣaaju ki shown.bs.modaliṣẹlẹ naa to waye).
.modal('hide')
Pẹlu ọwọ hides a modal. Pada si olupe ṣaaju ki modal naa ti farapamọ gangan (ie ṣaaju ki hidden.bs.modaliṣẹlẹ naa to waye).
.modal('handleUpdate')
Ṣe atunṣe ipo modal pẹlu ọwọ ti giga modal ba yipada lakoko ti o wa ni sisi (ie ti o ba jẹ pe yiyi yoo han).
.modal('dispose')
Pa ohun ano ká modal.
Awọn iṣẹlẹ
Kilasi modal Bootstrap ṣafihan awọn iṣẹlẹ diẹ fun sisọ sinu iṣẹ ṣiṣe modal. Gbogbo awọn iṣẹlẹ modal jẹ ina ni modal funrararẹ (ie ni <div class="modal">).
Iṣẹlẹ Iru
Apejuwe
fihan.bs.modal
Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni. Ti o ba ṣẹlẹ nipasẹ titẹ kan, eroja ti o tẹ wa bi relatedTargetohun-ini ti iṣẹlẹ naa.
han.bs.modal
Iṣẹlẹ yii jẹ ina nigbati modal ti jẹ ki o han si olumulo (yoo duro fun awọn iyipada CSS lati pari). Ti o ba ṣẹlẹ nipasẹ titẹ kan, eroja ti o tẹ wa bi relatedTargetohun-ini ti iṣẹlẹ naa.
tọju.bs.modal
Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hideapẹẹrẹ ti pe.
farasin.bs.modal
Iṣẹlẹ yii jẹ ina nigbati modal naa ba ti pari fifipamọ lati ọdọ olumulo (yoo duro fun awọn iyipada CSS lati pari).