SourceModal
Shandisa Bootstrap's JavaScript modal plugin kuti uwedzere dialog kune yako saiti yemabhokisi emwenje, zviziviso zvevashandisi, kana zvizere zvemukati zvemukati.
Usati watanga neBootstrap's modal component, iva nechokwadi chekuverenga zvinotevera sezvo sarudzo dzedu dzemenu dzakangochinja.
Modals dzakavakwa neHTML, CSS, uye JavaScript. Ivo vakamisikidzwa pamusoro pezvimwe zvese zviri mugwaro uye bvisa mupumburu kubva kune <body>
kuti modal zvemukati zvipumburuke panzvimbo.
Kudzvanya pane modal "kumashure" kunozovhara modal.
Bootstrap inongotsigira imwe modal hwindo panguva. Nested modals hadzitsigirwe sezvo isu tichitenda kuti hadzina ruzivo rwevashandisi.
Modals inoshandisa position: fixed
, iyo dzimwe nguva inogona kuve yakati wandei nezve kupa kwayo. Pese pazvinogoneka, isa yako modal HTML munzvimbo yepamusoro-yepamusoro kudzivirira kukanganisa kunogona kubva kune zvimwe zvinhu. Iwe ungangosangana nematambudziko kana uchinge waisa .modal
mukati mechimwe chinhu chakagadziriswa.
Zvekare, nekuda kwe position: fixed
, kune mamwe macaveats nekushandisa modal pane nharembozha. Ona yedu bhurawuza rutsigiro docs kuti uwane ruzivo.
Nekuda kwekuti HTML5 inotsanangura sei semantics yayo, iyo autofocus
HTML hunhu haina mhedzisiro muBootstrap modal. Kuti uwane maitiro akafanana, shandisa imwe tsika JavaScript:
Copy
$ ( '#myModal' ). on ( 'shown.bs.modal' , function () {
$ ( '#myInput' ). trigger ( 'focus' )
})
Ramba uchiverengera demos uye nhungamiro yekushandisa.
Pazasi pane static modal muenzaniso (zvinoreva kuti position
uye display
zvave kupfuudzwa). Inosanganisirwa iyo modal musoro, modal muviri (inodiwa padding
), uye modal tsoka (inosarudza). Tinokumbira kuti ubatanidze misoro yemodal ine zviito zvekudzinga pese pazvinogoneka, kana kuti upe chimwe chiito chakajeka chekudzinga.
Modal body text inoenda pano.
Copy
<div class= "modal" tabindex= "-1" role= "dialog" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
<p> Modal body text goes here.</p>
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
Shandura demodhi yekushanda nekudzvanya bhatani riri pazasi. Ichatsvedza pasi uye kupera mukati kubva kumusoro kwepeji.
Woohoo, you're reading this text in a modal!
Tanga demo modal
Copy
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModal" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLabel" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
...
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
Kupuruzira zvemukati marefu
Kana modal dzarebesa pakuona kwemushandisi kana mudziyo, ivo vanofamba vakazvimiririra kubva papeji pachayo. Edza demo pazasi kuti uone zvatiri kureva.
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.
Tanga demo modal
Copy
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModalLong" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModalLong" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLongTitle" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLongTitle" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
...
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
Wedzera .modal-dialog-centered
kune .modal-dialog
vertically pakati modal.
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.
Tanga demo modal
Copy
<!-- Button trigger modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModalCenter" >
Launch demo modal
</button>
<!-- Modal -->
<div class= "modal fade" id= "exampleModalCenter" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalCenterTitle" aria-hidden= "true" >
<div class= "modal-dialog modal-dialog-centered" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalCenterTitle" > Modal title</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
...
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Save changes</button>
</div>
</div>
</div>
</div>
Zvishandiso uye popovers zvinogona kuiswa mukati memodals sezvinodiwa. Kana modal dzakavharwa, chero maturusi ezvishandiso uye mapopovers mukati anoraswa otomatiki.
Popover in a modal
This button triggers a popover on click.
Tooltips in a modal
This link and that link have tooltips on hover.
Tanga demo modal
Copy
<div class= "modal-body" >
<h5> Popover in a modal</h5>
<p> This <a href= "#" role= "button" class= "btn btn-secondary popover-test" title= "Popover title" data-content= "Popover body content is set in this attribute." > button</a> triggers a popover on click.</p>
<hr>
<h5> Tooltips in a modal</h5>
<p><a href= "#" class= "tooltip-test" title= "Tooltip" > This link</a> and <a href= "#" class= "tooltip-test" title= "Tooltip" > that link</a> have tooltips on hover.</p>
</div>
Shandisa iyo Bootstrap grid system mukati me modal nekuisa .container-fluid
mukati meiyo .modal-body
. Zvadaro, shandisa akajairwa grid system makirasi sezvaungaita kumwe kumwe.
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Tanga demo modal
Copy
<div class= "modal-body" >
<div class= "container-fluid" >
<div class= "row" >
<div class= "col-md-4" > .col-md-4</div>
<div class= "col-md-4 ml-auto" > .col-md-4 .ml-auto</div>
</div>
<div class= "row" >
<div class= "col-md-3 ml-auto" > .col-md-3 .ml-auto</div>
<div class= "col-md-2 ml-auto" > .col-md-2 .ml-auto</div>
</div>
<div class= "row" >
<div class= "col-md-6 ml-auto" > .col-md-6 .ml-auto</div>
</div>
<div class= "row" >
<div class= "col-sm-9" >
Level 1: .col-sm-9
<div class= "row" >
<div class= "col-8 col-sm-6" >
Level 2: .col-8 .col-sm-6
</div>
<div class= "col-4 col-sm-6" >
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
Kusiyana kwe modal content
Iva neboka remabhatani ayo ese anokonzeresa imwe modal ine zvishoma zvakasiyana zviri mukati? Shandisa event.relatedTarget
uye HTML data-*
hunhu (pamwe kuburikidza nejQuery ) kusiyanisa zviri mukati me modal zvichienderana nekuti bhatani ripi rakadzvanywa.
Pazasi pane demo mhenyu inoteverwa nemuenzaniso HTML neJavaScript. Kuti uwane rumwe ruzivo, verenga modal zviitiko zvinyorwa zveruzivo nezve relatedTarget
.
Vhura modal ye @mdo
Vhura modal ye @fat
Vhura modal ye @getbootstrap
Copy
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" data-whatever= "@mdo" > Open modal for @mdo</button>
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" data-whatever= "@fat" > Open modal for @fat</button>
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#exampleModal" data-whatever= "@getbootstrap" > Open modal for @getbootstrap</button>
<div class= "modal fade" id= "exampleModal" tabindex= "-1" role= "dialog" aria-labelledby= "exampleModalLabel" aria-hidden= "true" >
<div class= "modal-dialog" role= "document" >
<div class= "modal-content" >
<div class= "modal-header" >
<h5 class= "modal-title" id= "exampleModalLabel" > New message</h5>
<button type= "button" class= "close" data-dismiss= "modal" aria-label= "Close" >
<span aria-hidden= "true" > × </span>
</button>
</div>
<div class= "modal-body" >
<form>
<div class= "form-group" >
<label for= "recipient-name" class= "col-form-label" > Recipient:</label>
<input type= "text" class= "form-control" id= "recipient-name" >
</div>
<div class= "form-group" >
<label for= "message-text" class= "col-form-label" > Message:</label>
<textarea class= "form-control" id= "message-text" ></textarea>
</div>
</form>
</div>
<div class= "modal-footer" >
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
<button type= "button" class= "btn btn-primary" > Send message</button>
</div>
</div>
</div>
</div>
Copy
$ ( '#exampleModal' ). on ( 'show.bs.modal' , function ( event ) {
var button = $ ( event . relatedTarget ) // Button that triggered the modal
var recipient = button . data ( 'whatever' ) // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $ ( this )
modal . find ( '.modal-title' ). text ( 'New message to ' + recipient )
modal . find ( '.modal-body input' ). val ( recipient )
})
Kune ma modal anongooneka pane kudzima kuti aone, bvisa .fade
kirasi kubva pane yako modal markup.
Copy
<div class= "modal" tabindex= "-1" role= "dialog" aria-labelledby= "..." aria-hidden= "true" >
...
</div>
Kana hurefu hwe modal huchichinja ichiri kuvhurika, iwe unofanirwa kufona $('#myModal').modal('handleUpdate')
kuti ugadzirise chinzvimbo che modal kuitira kana scrollbar ikaoneka.
Iva nechokwadi chekuwedzera role="dialog"
uye aria-labelledby="..."
, uchirevera zita re modal, ku .modal
, uye role="document"
kune .modal-dialog
pachayo. Pamusoro pezvo, iwe unogona kupa tsananguro yemodal dialog yako ne aria-describedby
pa .modal
.
Kubatanidza mavhidhiyo eYouTube
Kuisa mavhidhiyo eYouTube mumodals kunoda yekuwedzera JavaScript isiri muBootstrap kuti imise otomatiki kutamba nezvimwe. Ona iyi inobatsira Stack Overflow post kuti uwane rumwe ruzivo.
Modals dzine saizi mbiri dzekusarudzika, dzinowanikwa kuburikidza ne modifier makirasi kuti aiswe pane .modal-dialog
. Aya saizi anopinda mune mamwe mabreakpoints kudzivirira akachinjika scrollerbar pane nhete dzekutarisa.
Hombe modal
Small modal
Copy
<!-- Large modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= ".bd-example-modal-lg" > Large modal</button>
<div class= "modal fade bd-example-modal-lg" tabindex= "-1" role= "dialog" aria-labelledby= "myLargeModalLabel" aria-hidden= "true" >
<div class= "modal-dialog modal-lg" >
<div class= "modal-content" >
...
</div>
</div>
</div>
<!-- Small modal -->
<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= ".bd-example-modal-sm" > Small modal</button>
<div class= "modal fade bd-example-modal-sm" tabindex= "-1" role= "dialog" aria-labelledby= "mySmallModalLabel" aria-hidden= "true" >
<div class= "modal-dialog modal-sm" >
<div class= "modal-content" >
...
</div>
</div>
</div>
Iyo modal plugin inoshandura yako yakavanzika yemukati paunoda, kuburikidza nedata hunhu kana JavaScript. Iyo inowedzerawo .modal-open
kune <body>
yekupfuura default kupuruzira maitiro uye inogadzira .modal-backdrop
yekupa yekudzvanya nzvimbo yekudzinga yakaratidzwa modal kana uchidzvanya kunze kwe modal.
Shandisa modal pasina kunyora JavaScript. Gadzirisa data-toggle="modal"
chinhu chekutonga, sebhatani, pamwe chete nea data-target="#foo"
kana href="#foo"
kunanga imwe modhi yekushandura.
Copy
<button type= "button" data-toggle= "modal" data-target= "#myModal" > Launch modal</button>
Fonera modal ine id myModal
ine mutsara mumwechete weJavaScript:
Copy
$ ( '#myModal' ). modal ( options )
Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-
, semu data-backdrop=""
.
Zita
Type
Default
Tsanangudzo
kumashure
boolean kana tambo'static'
chokwadi
Inosanganisira modal-backdrop element. Neimwe nzira, tsanangura static
kune yekumashure iyo isingavhare modal pakudzvanya.
keyboard
boolean
chokwadi
Inovhara modal kana kiyi yekutiza ikadzvanywa
focus
boolean
chokwadi
Inoisa tarisiro pane modal kana yatangwa.
show
boolean
chokwadi
Inoratidza modal kana yatangwa.
Asynchronous nzira uye shanduko
Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .
Ona zvinyorwa zvedu zveJavaScript kuti uwane rumwe ruzivo.
Inomisa zvirimo zvako se modal. Inobvuma sarudzo dzaungada object
.
Copy
$ ( '#myModal' ). modal ({
keyboard : false
})
Pamaoko anoshandura modal. Inodzokera kune akafona modal isati yanyatsoratidzwa kana kuvanzwa (kureva kuti shown.bs.modal
kana hidden.bs.modal
chiitiko chisati chaitika).
Copy
$ ( '#myModal' ). modal ( 'toggle' )
Nemaoko anovhura modal. Inodzokera kune akafona modal isati yanyatsoratidzwa (kureva kuti shown.bs.modal
chiitiko chisati chaitika).
Copy
$ ( '#myModal' ). modal ( 'show' )
Anozvivanza modal. Inodzokera kune akafona modal isati yanyatsovanzwa (kureva kuti hidden.bs.modal
chiitiko chisati chaitika).
Copy
$ ( '#myModal' ). modal ( 'hide' )
Rongedza nemaoko chinzvimbo che modal kana kureba kwe modal ikachinja payakavhurika (kureva kuti kana scrollbar ikabuda).
Copy
$ ( '#myModal' ). modal ( 'handleUpdate' )
Inoparadza modal yechinhu.
Bootstrap's modal kirasi inofumura zviitiko zvishoma zvekukochekera kuita modal mashandiro. Zvese zviitiko zve modal zvinodzingwa pa modal pachayo (kureva pa <div class="modal">
).
Chiitiko Type
Tsanangudzo
show.bs.modal
Ichi chiitiko chinopisa nekukasira kana show
nzira yemuenzaniso inodanwa. Kana ikakonzerwa nekudzvanya, chinhu chakadzvanywa chinowanikwa sechinhu relatedTarget
chechiitiko.
kuratidza.bs.modal
Ichi chiitiko chinodzingwa kana modal yaitwa kuti ionekwe kumushandisi (inomirira kuti CSS shanduko ipedze). Kana ikakonzerwa nekudzvanya, chinhu chakadzvanywa chinowanikwa sechinhu relatedTarget
chechiitiko.
hide.bs.modal
Ichi chiitiko chinodzingwa nekukasira kana iyo hide
muenzaniso nzira yadaidzwa.
zvakavanzika.bs.modal
Ichi chiitiko chinodzingwa kana modal yapedza kuvanzwa kubva kumushandisi (inomirira kuti CSS shanduko ipedze).
Copy
$ ( '#myModal' ). on ( 'hidden.bs.modal' , function ( e ) {
// do something...
})