in English

Modal

Koristite Bootstrap-ov JavaScript modalni dodatak za dodavanje dijaloga na svoju stranicu za okvire za pregled, korisnička obavještenja ili potpuno prilagođeni sadržaj.

Kako radi

Pre nego što počnete sa Bootstrap modalnom komponentom, obavezno pročitajte sledeće jer su se naše opcije menija nedavno promenile.

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 .modalunutar 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 autofocusatribut nema efekta u Bootstrap modalima. Da biste postigli isti efekat, koristite neki prilagođeni JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Efekt animacije ove komponente ovisi o prefers-reduced-motionmedijskom upitu. Pogledajte odjeljak o smanjenom pokretu u našoj dokumentaciji o pristupačnosti .

Nastavite čitati za demonstracije i smjernice za korištenje.

Primjeri

Ispod je statički modalni primjer (što znači da su njegovi positioni displayzamijenjeni). 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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>

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-toggle="modal" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>

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-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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">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.

What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

Također možete kreirati modal koji se može pomicati i koji omogućava pomicanje modalnog tijela dodavanjem .modal-dialog-scrollableu .modal-dialog.

What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Vertikalno centriran

Dodajte .modal-dialog-centereddo .modal-dialogda 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-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-fluidunutar .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 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>

Imate gomilu dugmadi koja svi pokreću isti modal sa malo drugačijim sadržajem? Koristite event.relatedTargeti HTML data-*atribute (moguće putem jQueryja ) da biste promijenili sadržaj modalnog 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-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" 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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>

$('#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)
})

Promijenite animaciju

Varijabla $modal-fade-transformodređuje stanje transformacije .modal-dialogprije modalne animacije fade-in, $modal-show-transformvarijabla određuje transformaciju .modal-dialogna 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 .fadeklasu 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').modal('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-describedbyna .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>

Upotreba

Modalni dodatak uključuje vaš skriveni sadržaj na zahtjev, putem atributa podataka ili JavaScripta. Takođe dodaje .modal-openda se <body>zaobiđe podrazumevano ponašanje pomeranja i generiše a .modal-backdropda bi se obezbedila oblast klika za odbacivanje prikazanih modala kada se klikne izvan modalnog.

Preko atributa podataka

Aktivirajte modalni bez pisanja JavaScripta. Postavite data-toggle="modal"na element kontrolera, poput dugmeta, zajedno sa data-target="#foo"ili href="#foo"da biste ciljali određeni modal za prebacivanje.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Preko JavaScripta

Pozovite modalni s ID myModal-om s jednom linijom JavaScripta:

$('#myModal').modal(options)

Opcije

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka, dodajte naziv opcije u data-, kao u data-backdrop="".

Ime	Tip	Default	Opis
pozadina	boolean ili string`'static'`	tačno	Uključuje element modalne pozadine. Alternativno, navedite `static`za pozadinu koja ne zatvara modal na klik.
tastatura	boolean	tačno	Zatvara modal kada se pritisne tipka za izlaz
fokus	boolean	tačno	Stavlja fokus na modalni kada se inicijalizira.
show	boolean	tačno	Prikazuje 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 .

`.modal(options)`

Aktivira vaš sadržaj kao modalni. Prihvata opcione opcije object.

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

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.modalili ).hidden.bs.modal

$('#myModal').modal('toggle')

`.modal('show')`

Ručno otvara modalni. Vraća se pozivaocu prije nego što je modalni stvarno prikazan (tj. prije nego što se shown.bs.modaldogađaj dogodi).

$('#myModal').modal('show')

`.modal('hide')`

Ručno skriva modal. Vraća se pozivaocu prije nego što je modal zapravo skriven (tj. prije nego što se hidden.bs.modaldogađaj dogodi).

$('#myModal').modal('hide')

`.modal('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').modal('handleUpdate')

`.modal('dispose')`

Uništava modalni element.

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.
prikazano.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-keyboard`postavljenom na `false`.

$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})