Modal
Koristite Bootstrap-ov JavaScript modalni dodatak za dodavanje dijaloga na svoju web stranicu za okvire za pregled, korisnička obavještenja ili potpuno prilagođeni sadržaj.
Kako radi
Prije nego što počnete s Bootstrap modalnom komponentom, obavezno pročitajte sljedeće jer su se naše opcije menija nedavno promijenile.
- Modali se grade pomoću HTML-a, CSS-a i JavaScript-a. Oni su pozicionirani iznad svega ostalog u dokumentu i uklanjaju pomicanje iz dokumenta
<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 u isto vrijeme. Ugniježđeni modali nisu podržani jer vjerujemo da su loše korisničko iskustvo.
- Modali koriste
position: fixed
, što ponekad može biti malo posebno u pogledu njegovog prikazivanja. Kad god je moguće, postavite svoj modalni HTML na poziciju najvišeg nivoa kako biste izbjegli potencijalne smetnje od drugih elemenata. Vjerovatno ćete naići na probleme kada ugniježdite a.modal
unutar drugog fiksnog elementa. - Još jednom, zbog
position: fixed
, postoje neka upozorenja pri korištenju modala na mobilnim uređajima. Pogledajte naše dokumente za podršku pretraživača za detalje. - Zbog načina na koji HTML5 definira svoju semantiku, HTML
autofocus
atribut nema efekta u Bootstrap modalima. Da biste postigli isti efekat, koristite neki prilagođeni JavaScript:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
medijskom upitu. Pogledajte odjeljak o
smanjenom pokretu u našoj dokumentaciji o pristupačnosti .
Nastavite čitati za demonstracije i smjernice za korištenje.
Primjeri
Modalne komponente
Ispod je statički modalni primjer (što znači da su njegovi position
i display
zamijenjeni). Uključeno je modalno zaglavlje, modalno tijelo (obavezno za padding
) i modalno podnožje (opcionalno). Tražimo da uključite modalna zaglavlja s radnjama odbacivanja kad god je to moguće ili navedete drugu eksplicitnu radnju odbacivanja.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Demo uživo
Uključite radnu modalnu demonstraciju klikom na dugme ispod. Kliziće nadole i nestajati sa vrha stranice.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Statička pozadina
Kada je pozadina postavljena na statičnu, modal se neće zatvoriti kada kliknete izvan njega. Kliknite na dugme ispod da isprobate.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Pomeranje dugog sadržaja
Kada modali postanu predugi za korisnikov okvir za pregled ili uređaj, oni se pomiču nezavisno od same stranice. Isprobajte demo u nastavku da vidite na šta mislimo.
Također možete kreirati modal koji se može pomicati i koji omogućava pomicanje modalnog tijela dodavanjem .modal-dialog-scrollable
u .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Vertikalno centriran
Dodajte .modal-dialog-centered
do .modal-dialog
da biste vertikalno centrirali modal.
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
Alati i iskačući oglasi
Oznake alata i skočni prozori mogu se postaviti unutar modala po potrebi. Kada se modali zatvore, svi opisi alata i skočni prozori unutar se također automatski odbacuju.
<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-bs-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>
Korištenje mreže
Koristite Bootstrap grid sistem unutar modalnog ugniježđenja .container-fluid
unutar .modal-body
. Zatim koristite normalne klase sistema mreže kao i bilo gdje drugdje.
<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 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-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>
Različiti modalni sadržaj
Imate gomilu dugmadi koja svi pokreću isti modal sa malo drugačijim sadržajem? Koristite event.relatedTarget
i HTML data-bs-*
atribute za variranje sadržaja modala u zavisnosti od toga na koje dugme ste kliknuli.
Ispod je demo uživo praćen primjerima HTML-a i JavaScript-a. Za više informacija, pročitajte dokumentaciju o modalnim događajima za detalje o relatedTarget
.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<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-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
Prebacivanje između modala
Prebacite se između više modala s nekim pametnim postavljanjem atributa data-bs-target
i . data-bs-toggle
Na primjer, možete uključiti modal za poništavanje lozinke unutar već otvorenog modalnog za prijavu. Imajte na umu da više modala ne može biti otvoreno u isto vrijeme — ovaj metod jednostavno prebacuje između dva odvojena modala.
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
Promijenite animaciju
Varijabla $modal-fade-transform
određuje stanje transformacije .modal-dialog
prije modalne fade-in animacije, $modal-show-transform
varijabla određuje transformaciju .modal-dialog
na kraju modalne animacije fade-in.
Ako želite na primjer animaciju zumiranja, možete postaviti $modal-fade-transform: scale(.8)
.
Ukloni animaciju
Za modale koji se jednostavno pojavljuju, a ne blede u prikazu, uklonite .fade
klasu iz modalne oznake.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dinamičke visine
Ako se visina modala promijeni dok je otvoren, trebali biste pozvati myModal.handleUpdate()
da ponovo podesite poziciju modala u slučaju da se pojavi traka za pomicanje.
Pristupačnost
Obavezno dodajte aria-labelledby="..."
, pozivajući se na modalni naslov, u .modal
. Dodatno, možete dati opis svog modalnog dijaloga sa aria-describedby
na .modal
. Imajte na umu da ne morate dodavati role="dialog"
jer ga već dodajemo putem JavaScripta.
Ugrađivanje YouTube video zapisa
Ugrađivanje YouTube videozapisa u modale zahtijeva dodatni JavaScript koji nije u Bootstrapu za automatsko zaustavljanje reprodukcije i još mnogo toga. Pogledajte ovu korisnu objavu Stack Overflow za više informacija.
Opcione veličine
Modali imaju tri opcione veličine, dostupne preko klasa modifikatora koje se postavljaju na .modal-dialog
. Ove veličine se pojavljuju na određenim prijelomnim tačkama kako bi se izbjegle horizontalne trake za pomicanje na užim okvirima za prikaz.
Veličina | Klasa | Modalna maksimalna širina |
---|---|---|
Mala | .modal-sm |
300px |
Default | Nema | 500px |
Veliko | .modal-lg |
800px |
Ekstra veliki | .modal-xl |
1140px |
Naš zadani modal bez klase modifikatora čini modal "srednje" veličine.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Modal na cijelom ekranu
Još jedno nadjačavanje je opcija da se pojavi modalni prozor koji pokriva korisnički okvir za prikaz, dostupan preko klasa modifikatora koje su postavljene na .modal-dialog
.
Klasa | Dostupnost |
---|---|
.modal-fullscreen |
Uvijek |
.modal-fullscreen-sm-down |
Ispod576px |
.modal-fullscreen-md-down |
Ispod768px |
.modal-fullscreen-lg-down |
Ispod992px |
.modal-fullscreen-xl-down |
Ispod1200px |
.modal-fullscreen-xxl-down |
Ispod1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Varijable
$modal-inner-padding: $spacer;
$modal-footer-margin-between: .5rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: $box-shadow-sm;
$modal-content-box-shadow-sm-up: $box-shadow;
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-border-width;
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;
$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform .3s ease-out;
$modal-scale-transform: scale(1.02);
Petlja
Responzivni modali na cijelom ekranu se generiraju putem $breakpoints
mape i petlje u scss/_modal.scss
.
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
Upotreba
Modalni dodatak uključuje vaš skriveni sadržaj na zahtjev, putem atributa podataka ili JavaScripta. Takođe nadjačava podrazumevano ponašanje pomeranja i generiše a .modal-backdrop
da obezbedi oblast klika za odbacivanje prikazanih modala kada se klikne izvan modalnog.
Preko atributa podataka
Prebaci
Aktivirajte modalni bez pisanja JavaScripta. Postavite data-bs-toggle="modal"
na element kontrolera, poput dugmeta, zajedno sa data-bs-target="#foo"
ili href="#foo"
da biste ciljali određeni modal za prebacivanje.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Odbaci
Otpuštanje se može postići s data
atributom na gumbu unutar modala kao što je prikazano u nastavku:
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
ili na dugme izvan modalnog koristeći data-bs-target
kao što je prikazano u nastavku:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Preko JavaScripta
Kreirajte modal sa jednom linijom JavaScripta:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Opcije
Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka, dodajte naziv opcije u data-bs-
, kao u data-bs-backdrop=""
.
Ime | Tip | Default | Opis |
---|---|---|---|
backdrop |
boolean ili string'static' |
true |
Uključuje element modalne pozadine. Alternativno, navedite static za pozadinu koja ne zatvara modal na klik. |
keyboard |
boolean | true |
Zatvara modal kada se pritisne tipka za izlaz |
focus |
boolean | true |
Stavlja fokus na modalni kada se inicijalizira. |
Metode
Asinhrone metode i prijelazi
Sve API metode su asinhrone i pokreću tranziciju . Oni se vraćaju pozivaocu čim prijelaz započne, ali prije nego što se završi . Osim toga, poziv metode na prelaznu komponentu će biti zanemaren .
Pogledajte našu JavaScript dokumentaciju za više informacija .
Opcije prolaska
Aktivira vaš sadržaj kao modalni. Prihvata opcione opcije object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
preklopiti
Ručno prebacuje modal. Vraća pozivaocu prije nego što je modal zapravo prikazan ili sakriven (tj. prije nego se dogodi događaj shown.bs.modal
ili ).hidden.bs.modal
myModal.toggle()
show
Ručno otvara modalni. Vraća se pozivaocu prije nego što je modalni stvarno prikazan (tj. prije nego što se shown.bs.modal
događaj dogodi).
myModal.show()
Također, možete proslijediti DOM element kao argument koji se može primiti u modalnim događajima (kao relatedTarget
svojstvo).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
sakriti
Ručno skriva modal. Vraća se pozivaocu prije nego što je modal zapravo skriven (tj. prije nego što se hidden.bs.modal
događaj dogodi).
myModal.hide()
handleUpdate
Ručno ponovo podesite poziciju modala ako se visina modala promijeni dok je otvoren (tj. u slučaju da se pojavi traka za pomicanje).
myModal.handleUpdate()
dispose
Uništava modalni element. (Uklanja pohranjene podatke na DOM elementu)
myModal.dispose()
getInstance
Statička metoda koja vam omogućava da dobijete modalnu instancu pridruženu DOM elementu
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Statička metoda koja vam omogućava da dobijete modalnu instancu povezanu s DOM elementom ili kreirate novu u slučaju da nije inicijalizirana
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Događaji
Modalna klasa Bootstrapa izlaže nekoliko događaja za spajanje na modalnu funkcionalnost. Svi modalni događaji se aktiviraju na samom modalnom (tj. na <div class="modal">
).
Vrsta događaja | Opis |
---|---|
show.bs.modal |
Ovaj događaj se aktivira odmah kada show se pozove metoda instance. Ako je uzrokovan klikom, kliknuti element je dostupan kao relatedTarget svojstvo događaja. |
shown.bs.modal |
Ovaj događaj se pokreće kada se modal učini vidljivim korisniku (će čekati da se CSS tranzicije dovrše). Ako je uzrokovan klikom, kliknuti element je dostupan kao relatedTarget svojstvo događaja. |
hide.bs.modal |
Ovaj događaj se pokreće odmah kada se hide pozove metoda instance. |
hidden.bs.modal |
Ovaj događaj se pokreće kada modal završi sa sakrivanjem od korisnika (će čekati da se CSS tranzicije dovrše). |
hidePrevented.bs.modal |
Ovaj događaj se pokreće kada je prikazan modal, njegova pozadina je static i klik izvan modalnog ili pritisnuti tipku escape se izvodi s opcijom tipkovnice ili data-bs-keyboard postavljenom na false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})