Upotrijebite Bootstrapov JavaScript modalni dodatak za dodavanje dijaloških okvira na svoje web mjesto za okvire za pregled, korisničke obavijesti ili potpuno prilagođeni sadržaj.
Kako radi
Prije nego što započnete s modalnom komponentom Bootstrapa, svakako pročitajte sljedeće jer su se naše opcije izbornika nedavno promijenile.
Modali su izgrađeni pomoću HTML-a, CSS-a i JavaScripta. Postavljeni su iznad svega ostalog u dokumentu i uklanjaju pomicanje iz <body>tako da se umjesto toga pomiče modalni sadržaj.
Klikom na modalnu "pozadinu" automatski će se zatvoriti modal.
Bootstrap podržava samo jedan modalni prozor odjednom. Ugniježđeni modali nisu podržani jer vjerujemo da stvaraju loše korisničko iskustvo.
Modali koriste position: fixed, što ponekad može biti malo specifično u pogledu prikazivanja. Kad god je to moguće, postavite svoj modalni HTML na poziciju najviše razine kako biste izbjegli moguće smetnje drugih elemenata. Vjerojatno ćete naići na probleme prilikom ugniježđivanja .modalunutar drugog fiksnog elementa.
Zbog načina na koji HTML5 definira svoju semantiku, HTML autofocusatribut nema učinka u Bootstrap modalima. Da biste postigli isti učinak, upotrijebite prilagođeni JavaScript:
Nastavite čitati za demonstracije i smjernice za korištenje.
Primjeri
Modalne komponente
Ispod je statički modalni primjer (što znači da su positioni displaynadjačani). Uključeno je modalno zaglavlje, modalno tijelo (potrebno za padding) i modalno podnožje (neobavezno). Tražimo da uključite modalna zaglavlja s radnjama odbacivanja kad god je to moguće ili navedite drugu izričitu radnju odbacivanja.
Modalni naslov
Modalni tekst ide ovdje.
Demo uživo
Uključite modalnu demonstraciju koja radi klikom na gumb ispod. Kliznit će prema dolje i izblijedjeti s vrha stranice.
Modal title
Woohoo, you're reading this text in a modal!
Pomicanje dugog sadržaja
Kada modali postanu predugi za korisnikov okvir za prikaz ili uređaj, oni se pomiču neovisno o samoj stranici. Isprobajte demo u nastavku da vidite na što mislimo.
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.
Opisi i skočni prozori
Opisi alata i skočni prozori mogu se po potrebi postaviti unutar modala. Kada se modali zatvore, svi opisi alata i skočni prozori unutar njih također se automatski odbacuju.
Iskoristite Bootstrap grid sustav unutar modala ugniježđujući .container-fluidse unutar .modal-body. Zatim upotrijebite normalne klase mrežnog sustava kao što biste to radili bilo gdje drugdje.
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
Različiti modalni sadržaji
Imate hrpu gumba koji svi pokreću isti modal s malo drugačijim sadržajem? Upotrijebite HTML atributeevent.relatedTarget i (moguće putem jQueryja ) za mijenjanje sadržaja modala ovisno o tome koji je gumb kliknut.data-*
Za modale koji se jednostavno pojavljuju umjesto da blijede u prikazu, uklonite .fadeklasu iz svoje modalne oznake.
Dinamičke visine
Ako se visina modala promijeni dok je otvoren, trebali biste pozvati $('#myModal').modal('handleUpdate')da ponovno prilagodite položaj modala u slučaju da se pojavi traka za pomicanje.
Pristupačnost
Obavezno dodajte role="dialog"i aria-labelledby="...", pozivajući se na modalni naslov, na .modali role="document"na samoga .modal-dialogsebe. Osim toga, možete dati opis svog modalnog dijaloga s aria-describedbyna .modal.
Ugradnja YouTube videa
Ugrađivanje YouTube videozapisa u modale zahtijeva dodatni JavaScript koji nije u Bootstrapu za automatsko zaustavljanje reprodukcije i više. Za više informacija pogledajte ovaj korisni post Stack Overflowa .
Izborne veličine
Modali imaju dvije izborne veličine, dostupne putem modifikatorskih klasa koje se postavljaju na .modal-dialog. Ove se veličine pojavljuju na određenim prijelomnim točkama kako bi se izbjegle horizontalne trake za pomicanje na užim prozorima.
Large modal
...
Small modal
...
Korištenje
Modalni dodatak prebacuje vaš skriveni sadržaj na zahtjev, putem atributa podataka ili JavaScripta. Također dodaje .modal-openza <body>nadjačavanje zadanog ponašanja pomicanja i generira .modal-backdropza pružanje područja klika za odbacivanje prikazanih modala kada se klikne izvan modala.
Preko atributa podataka
Aktivirajte modal bez pisanja JavaScripta. Postavite data-toggle="modal"na element kontrolera, poput gumba, zajedno s data-target="#foo"ili href="#foo"za ciljanje određenog modala za prebacivanje.
Preko JavaScripta
Pozovite modal s ID -om myModals jednim redom JavaScripta:
Mogućnosti
Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-, kao u data-backdrop="".
Ime
Tip
Zadano
Opis
pozadina
booleov ili niz'static'
pravi
Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard
boolean
true
Closes the modal when escape key is pressed
focus
boolean
true
Puts the focus on the modal when initialized.
show
boolean
true
Shows the modal when initialized.
Methods
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
Activates your content as a modal. Accepts an optional options object.
.modal('toggle')
Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).
.modal('show')
Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).
.modal('hide')
Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).
.modal('handleUpdate')
Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
.modal('dispose')
Destroys an element’s modal.
Events
Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).
Event Type
Opis
pokazati.bs.modalni
Ovaj događaj aktivira se odmah kada showse pozove metoda instance. Ako je uzrokovan klikom, kliknuti element dostupan je kao relatedTargetsvojstvo događaja.
prikazano.bs.modalno
Ovaj se događaj pokreće kada je modal postao vidljiv korisniku (pričekat će da se CSS prijelazi završe). Ako je uzrokovan klikom, kliknuti element dostupan je kao relatedTargetsvojstvo događaja.
sakriti.bs.modalan
Ovaj se događaj aktivira odmah nakon hidepozivanja metode instance.
skriven.bs.modalan
Ovaj se događaj pokreće kada se modal više ne skriva od korisnika (pričekat će da se CSS prijelazi završe).