Kasutage Bootstrapi JavaScripti modaalset pistikprogrammi, et lisada oma saidile dialoogid valguskastide, kasutajate märguannete või täielikult kohandatud sisu jaoks.
Kuidas see töötab
Enne Bootstrapi modaalkomponendiga alustamist lugege kindlasti järgmist, kuna meie menüüvalikud on hiljuti muutunud.
Modaalid on üles ehitatud HTML-i, CSS-i ja JavaScriptiga. Need asuvad dokumendis kõige muu kohal ja eemaldavad kerimise, <body>nii et selle asemel keritakse modaalset sisu.
Bootstrap toetab korraga ainult ühte modaalset akent. Pesastatud modaale ei toetata, kuna usume, et need on kehvad kasutuskogemused.
Modaalid kasutavad position: fixed, mis võib mõnikord olla selle renderdamisel pisut eriline. Võimaluse korral asetage oma modaalne HTML kõrgeimale tasemele, et vältida teiste elementide võimalikke häireid. Tõenäoliselt tekib probleeme .modalteise fikseeritud elemendi pesastamisel.
HTML5 semantika määratlemise tõttu ei mõjuta HTML-i atribuut Bootstrapi modaalides autofocus. Sama efekti saavutamiseks kasutage mõnda kohandatud JavaScripti:
Allpool on staatiline modaalne näide (see tähendab, et selle positionja displayon tühistatud). Kaasatud on modaalne päis, modaalne keha (nõutav jaoks padding) ja modaalne jalus (valikuline). Palume teil võimaluse korral lisada modaalsed päised koos loobumistoimingutega või esitada mõni muu selgesõnaline loobumistoiming.
Modaalne pealkiri
Modaalne põhitekst läheb siia.
Live demo
Lülitage töötav modaaldemo sisse, klõpsates alloleval nupul. See libiseb alla ja tuhmub lehe ülaosast sisse.
Modaalne pealkiri
Woohoo, sa loed seda teksti modaalselt!
Staatiline taust
Kui taust on seatud staatiliseks, ei sulgu modaal sellest väljaspool klõpsates. Proovimiseks klõpsake alloleval nupul.
Modaalne pealkiri
I will not close if you click outside me. Don't even try to press escape key.
Pika sisu kerimine
Kui modaalid muutuvad kasutaja vaateava või seadme jaoks liiga pikaks, kerivad need lehest endast sõltumatult. Proovige allolevat demo, et näha, mida me mõtleme.
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.
Saate luua ka keritava modaali, mis võimaldab kerida modaalkeha, lisades .modal-dialog-scrollablesellele .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.
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.
Tööriistanõuanded ja hüpikaknad
Vajadusel saab modaalidesse paigutada tööriistavihjeid ja hüpikaknaid . Kui modaalid on suletud, jäetakse automaatselt kõrvale ka kõik tööriistaspikrid ja hüpikaknad.
Kasutage modaalis Bootstrapi ruudustikusüsteemi , pesatades .container-fluid. .modal-bodySeejärel kasutage tavalisi ruudustikusüsteemi klasse nagu mujal.
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
Muutuv modaalne sisu
Kas teil on hunnik nuppe, mis kõik käivitavad sama modaali ja veidi erineva sisuga? Kasutage event.relatedTargetja HTML - data-*atribuute (võimalik , et jQuery kaudu ), et muuta modaali sisu sõltuvalt sellest, millisel nupul klõpsati.
Allpool on reaalajas demo, millele järgneb HTML-i ja JavaScripti näide. Lisateabe saamiseks lugege üksikasju kohta modaalsete sündmuste dokumentidestrelatedTarget .
New message
Muuda animatsiooni
Muutuja $modal-fade-transformmäärab teisendusoleku .modal-dialogenne modaalset sumbuvat animatsiooni, $modal-show-transformmuutuja määrab teisenduse .modal-dialogmodaalse sumbumise animatsiooni lõpus.
Kui soovite näiteks suumimisanimatsiooni, saate määrata $modal-fade-transform: scale(.8).
Eemalda animatsioon
Modaalide puhul, mis lihtsalt ilmuvad, mitte ei tuhmu vaatamiseks, eemaldage .fadeklass oma modaalimärgistusest.
Dünaamilised kõrgused
Kui modaali kõrgus muutub, kui see on avatud, peaksite helistama $('#myModal').modal('handleUpdate'), et modaali asukohta uuesti reguleerida juhuks, kui ilmub kerimisriba.
Juurdepääsetavus
Kindlasti lisage role="dialog"ja aria-labelledby="...", viidates modaalsele pealkirjale , .modalja role="document"iseendale .modal-dialog. Lisaks võite anda oma modaalse dialoogi aria-describedbykirjelduse .modal.
Modaalidel on kolm valikulist suurust, mis on saadaval modifikaatoriklasside kaudu, mis asetatakse .modal-dialog. Need suurused rakenduvad teatud murdepunktides, et vältida kitsamates vaateavades horisontaalseid kerimisribasid.
Suurus
Klass
Modaalne maksimaalne laius
Väike
.modal-sm
300px
Vaikimisi
Mitte ühtegi
500px
Suur
.modal-lg
800px
Väga suur
.modal-xl
1140px
Meie vaikimisi modaal ilma modifikaatorita klassi moodustab "keskmise" suurusega modaali.
Extra large modal
...
Large modal
...
Small modal
...
Kasutamine
Modaalne pistikprogramm lülitab teie peidetud sisu nõudmisel andmeatribuutide või JavaScripti kaudu sisse. Samuti lisab .modal-opensee <body>kerimise vaikekäitumise alistamise ja loob .modal-backdropklõpsamisala kuvatavate modaalide kõrvalejätmiseks, kui klõpsate väljaspool modaali.
Andmeatribuutide kaudu
Aktiveerige modaal JavaScripti kirjutamata. Seadistage data-toggle="modal"kontrolleri element, nagu nupp, koos data-target="#foo"või href="#foo", et sihtida ümberlülitamiseks konkreetset modaali.
JavaScripti kaudu
Kutsuge modaali ID myModal-ga ühe JavaScripti reaga:
Valikud
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-backdrop="".
Nimi
Tüüp
Vaikimisi
Kirjeldus
taustaks
tõeväärtus või string'static'
tõsi
Sisaldab modaalset taustaelementi. Teise võimalusena määrake statictaust, mis ei sulge modaali klõpsamisel või paoklahvi vajutamisel.
klaviatuur
tõeväärtus
tõsi
Sulgeb modaali, kui vajutada paoklahvi
keskenduda
tõeväärtus
tõsi
Initsialiseerimisel keskendutakse modaalile.
näidata
tõeväärtus
tõsi
Initsialiseerimisel kuvatakse modaal.
meetodid
Asünkroonsed meetodid ja üleminekud
Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .
Aktiveerib teie sisu modaalina. Aktsepteerib valikulisi valikuid object.
.modal('toggle')
Lülitab modaali käsitsi ümber. Naaseb helistaja juurde enne, kui modaal on tegelikult näidatud või peidetud (st enne shown.bs.modalvõi hidden.bs.modalsündmuse toimumist).
.modal('show')
Avab modaali käsitsi. Naaseb helistaja juurde enne, kui modaali on tegelikult näidatud (st enne shown.bs.modalsündmuse toimumist).
.modal('hide')
Peidab modaali käsitsi. Naaseb helistaja juurde enne, kui modaal on tegelikult peidetud (st enne hidden.bs.modalsündmuse toimumist).
.modal('handleUpdate')
Reguleerige modaali asendit käsitsi, kui modaali kõrgus muutub avatud olekus (st kui ilmub kerimisriba).
.modal('dispose')
Hävitab elemendi modaali.
Sündmused
Bootstrapi modaalklass paljastab mõned sündmused modaalse funktsionaalsusega ühendamiseks. Kõik modaalsündmused käivitatakse modaali enda (st <div class="modal">) suunas.
Sündmuse tüüp
Kirjeldus
show.bs.modal
See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse. Kui selle põhjuseks on klõps, on klõpsatud element saadaval relatedTargetsündmuse atribuudina.
näidatud.bs.modal
See sündmus käivitatakse, kui modaal on kasutajale nähtavaks tehtud (ootab CSS-i üleminekut). Kui selle põhjuseks on klõps, on klõpsatud element saadaval relatedTargetsündmuse atribuudina.
peida.bs.modal
See sündmus käivitatakse kohe, kui hideeksemplari meetod on välja kutsutud.
peidetud.bs.modal
See sündmus käivitatakse, kui modaal on kasutaja eest peitmise lõpetanud (ootab, kuni CSS-i üleminekud on lõpule viidud).
peidaPrevented.bs.modal
See sündmus käivitatakse, kui modaali näidatakse, selle taustaks on staticja tehakse klõps väljaspool modaali või sooritatakse paoklahvivajutus.