Çyra gutulary, ulanyjy habarnamalary ýa-da düýbünden ýörite mazmun üçin sahypaňyza gepleşikler goşmak üçin Bootstrap-yň JavaScript modal pluginini ulanyň.
Bu nähili işleýär
“Bootstrap” -yň modal komponenti bilen başlamazdan ozal menýu opsiýalarymyzyň üýtgemegi sebäpli aşakdakylary okaň.
Modallar HTML, CSS we JavaScript bilen gurulýar. <body>Olar resminamadaky beýleki zatlaryň üstünde ýerleşýärler we modal mazmunyň ýerine aýlanmagy üçin aýlawy aýyrýarlar .
Bootstrap bir gezekde diňe bir modal penjiräni goldaýar. Içerki modallar goldanylmaýar, sebäbi ulanyjylaryň pes tejribelerine ynanýarys.
Modallar ulanylýar position: fixed, käwagt onuň görkezilişi barada birneme aýratyn bolup biler. Mümkin boldugyça, beýleki elementleriň bolup biljek päsgelçiliklerinden gaça durmak üçin modal HTML-ni iň ýokary derejä goýuň. .modalBaşga bir kesgitli elementiň içinde höwürtge döredeniňizde kynçylyklara duçar bolarsyňyz .
HTML5 semantikasyny nädip kesgitleýändigi sebäpli, HTML autofocusatributynyň Bootstrap modallarynda täsiri ýok. Şol bir effekt gazanmak üçin käbir JavaScript ulanyň:
Görkezişler we ulanyş görkezmeleri üçin okaň.
Mysallar
Modal komponentler
Aşakda statiki modal mysal (onuň manysyny aňladýar positionwe displayýokaşdy). Modal sözbaşy, modal korpus (zerur padding) we modal aşaky sözbaşy (islege görä) girýär. Mümkin boldugyça işden aýyrmak hereketleri bilen modal sözbaşylary goşmagyňyzy ýa-da başga bir aç-açan işden aýyrmagyňyzy haýyş edýäris.
Modal ady
Modal beden teksti şu ýere gidýär.
Göni görkeziş
Aşakdaky düwmä basyp, işleýän modal demony üýtgediň. Aşakdan süýşer we sahypanyň ýokarsyndan pese gaçar.
Modal title
Woohoo, you're reading this text in a modal!
Uzyn mazmuny aýlamak
Modallar ulanyjynyň görnüşi ýa-da enjamy üçin gaty uzyn bolanda, sahypanyň özünden garaşsyz aýlanýar. Näme diýjek bolýanymyzy görmek üçin aşakdaky demo synap görüň.
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.
Dik merkezde
Modaly dikligine merkezleşdirmek üçin .modal-dialog-centeredgoşuň ..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.
Gurallar we popovers
Gurallar we popovers zerur bolanda modallaryň içinde ýerleşdirilip bilner. Modallar ýapylanda, içindäki islendik gurallar we açyjylar hem awtomatiki usulda işden çykarylýar.
“Bootstrap” grid ulgamyny içerde höwürtge bilen modalyň içinde .container-fluidulanyň .modal-body. Soň bolsa, beýleki ýerlerde bolşy ýaly adaty set ulgamy sapaklaryny ulanyň.
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
Dürli modal mazmun
Birneme üýtgeşik mazmunly birmeňzeş modaly herekete getirýän bir topar düwmeler barmy? Modalyň mazmunyny haýsy düwmä basylandygyna görä üýtgetmek üçin event.relatedTargetHTML atributlaryny data-*( ähtimal jQuery arkaly ) ulanyň .
Aşakda HTML we JavaScript mysallary bilen göni ýaýlymda görkezilýär. Has giňişleýin maglumat üçin jikme-jiklikler üçin modal wakalaryň resminamalaryny okaňrelatedTarget .
New message
Animasiýany aýyryň
Görmek üçin ýitip gitmän, ýönekeý görünýän modallar üçin .fadesynpy modal belligiňizden aýyryň.
Dinamiki belentlikler
Modalyň beýikligi açyk wagty üýtgese, $('#myModal').modal('handleUpdate')aýlaw paneli peýda bolan ýagdaýynda modalyň ýagdaýyny sazlamak üçin jaň etmeli.
Elýeterlilik
Modal adyna, özüne role="dialog"we özüne goşuň . Mundan başga-da, modal gepleşikleriňiziň düşündirişini berip bilersiňiz .aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal
Modallarda iki sany goşmaça ululyk bar, a-da goýuljak üýtgediji synplar arkaly .modal-dialog. Bu ululyklar dar görnüşdäki gorizontal aýlaw panellerinden gaça durmak üçin belli bir nokatlara girýär.
Large modal
...
Small modal
...
Ulanylyşy
Modal plugin, gizlin mazmunyňyzy maglumat atributlary ýa-da JavaScript arkaly islege görä üýtgedýär. Şeýle hem , deslapky aýlanyş häsiýetini ýok etmek .modal-openüçin goşant goşýar we modalyň daşyna basanyňyzda görkezilen modallary <body>ýatyrmak üçin basmak meýdançasyny döredýär..modal-backdrop
Maglumat atributlary arkaly
JavaScript ýazman modaly işjeňleşdiriň. Dolandyryjy data-toggle="modal"elementi, düwme ýaly, data-target="#foo"ýa-da href="#foo"üýtgetmek üçin belli bir modaly nyşana alyň.
JavaScript arkaly
myModalJavaScript-iň bir setiri bolan idli modala jaň ediň :
Görnüş
Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-backdrop="".
Ady
Görnüşi
Bellenen
Düşündiriş
fon
bulean ýa-da setir'static'
dogry
Modal-fon elementini öz içine alýar. staticAtivea- da bolmasa, basylanda modaly ýapmaýan fon üçin kesgitläň .
klawiatura
boolean
dogry
Gaçmak düwmesi basylanda modaly ýapýar
fokus
boolean
dogry
Başlanylanda ünsi modala gönükdirýär.
görkezmek
boolean
dogry
Başlanylanda modaly görkezýär.
Usullar
Asynkron usullar we geçişler
APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .
Mazmunyňyzy modal hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.
.modal('toggle')
Modal bilen el bilen çalşyň. Modal hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.modalýa-da hidden.bs.modalwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär.
.modal('show')
Modal bilen el bilen açýar. Modal görkezilmänkä (ýagny shown.bs.modalwaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
.modal('hide')
Modaly el bilen gizleýär. Modal aslynda gizlenmänkä (ýagny waka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär .hidden.bs.modal
.modal('handleUpdate')
Modalyň beýikligi açyk wagty üýtgese (meselem, aýlaw paneli peýda bolan ýagdaýynda) modalyň ýagdaýyny el bilen düzüň.
.modal('dispose')
Bir elementiň modalyny ýok edýär.
Wakalar
“Bootstrap” -yň modal synpy modal işleýşi üçin birnäçe wakany paş edýär. Modhli modal wakalar modalyň özünde (ýagny <div class="modal">).
Çäräniň görnüşi
Düşündiriş
show.bs.modal
showBu waka mysal usuly çagyrylanda derrew ýanýar . Bir gezek basmak bilen ýüze çykan bolsa, basylan element relatedTargetwakanyň häsiýeti hökmünde elýeterlidir.
görkezilen.bs.modal
Bu waka modal ulanyja görünen mahaly atylýar (CSS geçişleriniň tamamlanmagyna garaşýar). Bir gezek basmak bilen ýüze çykan bolsa, basylan element relatedTargetwakanyň häsiýeti hökmünde elýeterlidir.
hide.bs.modal
Bu waka hidemysal usuly çagyrylanda derrew atylýar.
gizlenen.bs.modal
Bu waka, modal ulanyjydan gizlenip gutarandan soň atylýar (CSS geçişleriniň tamamlanmagyna garaşýar).