in English

Modalni

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.
  • Još jednom, zbog position: fixed, postoje neka upozorenja u vezi s upotrebom modala na mobilnim uređajima. Pogledajte našu dokumentaciju za podršku preglednika za detalje.
  • 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:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})
Učinak animacije ove komponente ovisi o prefers-reduced-motionmedijskom upitu. Pogledajte odjeljak smanjenog kretanja 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 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.

<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 modalnu demonstraciju koja radi klikom na gumb ispod. Kliznit će prema dolje i izblijedjeti s 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 se klikne izvan nje. Pritisnite gumb u nastavku 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>

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.

Također možete stvoriti modal s mogućnošću pomicanja koji omogućuje pomicanje tijela modala dodavanjem .modal-dialog-scrollableu .modal-dialog.

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

Okomito centrirano

Dodajte .modal-dialog-centeredza .modal-dialogokomito centriranje modala.

<!-- 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>

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.

<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

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.

<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>

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-*

Ispod je demonstracija uživo praćena primjerima HTML-a i JavaScripta. 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)
})

Promjena animacije

Varijabla $modal-fade-transformodređuje stanje transformacije .modal-dialogprije modalne animacije zatamnjenja, $modal-show-transformvarijabla određuje transformaciju .modal-dialogna kraju modalne animacije zatamnjenja.

Ako želite, na primjer, animaciju za povećanje, možete postaviti $modal-fade-transform: scale(.8).

Ukloni animaciju

Za modale koji se jednostavno pojavljuju umjesto da blijede u prikazu, uklonite .fadeklasu iz svoje 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 ponovno prilagodite položaj modala u slučaju da se pojavi traka za pomicanje.

Pristupačnost

Obavezno dodajte aria-labelledby="...", pozivajući se na modalni naslov, u .modal. Osim toga, možete dati opis svog modalnog dijaloga s aria-describedbyna .modal. Imajte na umu da ne morate dodavati role="dialog"jer ga već dodajemo putem JavaScripta.

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 tri 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.

Veličina Klasa Modalna maksimalna širina
Mali .modal-sm 300px
Zadano Nijedan 500px
velika .modal-lg 800px
Jako veliko .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>

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.

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

Preko JavaScripta

Pozovite modal s ID -om myModals jednim redom JavaScripta:

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

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 Uključuje element modalne pozadine. Alternativno, navedite staticza pozadinu koja ne zatvara modal na klik.
tipkovnica Booleov pravi Zatvara modal kada se pritisne tipka za izlaz
usredotočenost Booleov pravi Stavlja fokus na modal kada se inicijalizira.
pokazati Booleov pravi Prikazuje modal kada se inicijalizira.

Metode

Asinkrone metode i prijelazi

Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .

Pogledajte našu JavaScript dokumentaciju za više informacija .

.modal(options)

Aktivira vaš sadržaj kao modal. Prihvaća izborne opcije object.

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

.modal('toggle')

Ručno mijenja modal. Vraća se pozivatelju prije nego što se modal stvarno prikaže ili sakrije (tj. prije nego što se dogodi događaj shown.bs.modalili ).hidden.bs.modal

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

.modal('show')

Ručno otvara modal. Vraća se pozivatelju prije nego što se modal stvarno prikaže (tj. prije nego što se shown.bs.modaldogađaj dogodi).

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

.modal('hide')

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

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

.modal('handleUpdate')

Ručno ponovno prilagodite položaj 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 modal elementa.

Događaji

Bootstrapova modalna klasa izlaže nekoliko događaja za spajanje na modalnu funkcionalnost. Svi modalni događaji pokreću se na samom modalu (tj. na <div class="modal">).

Vrsta događaja 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).
hidePrevented.bs.modal Ovaj se događaj pokreće kada se modal prikaže, njegova pozadina je statici klik izvan modala ili pritisak tipke za izlaz izvodi se s opcijom tipkovnice ili data-keyboardpostavljenom na false. 
$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})