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.

Na ovoj stranici

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:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.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.

<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 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-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 se klikne izvan nje. Pritisnite gumb u nastavku 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>

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

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

Imate hrpu gumba koji svi pokreću isti modal s malo drugačijim sadržajem? Koristite atributeevent.relatedTarget i HTMLdata-bs-* za mijenjanje sadržaja modala ovisno o tome koji je gumb kliknut.

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

Prebacivanje između više modala s nekim pametnim postavljanjem atributa data-bs-targeti . data-bs-toggleNa primjer, možete prebaciti modal za ponovno postavljanje lozinke unutar već otvorenog modala za prijavu. Imajte na umu da više modala ne može biti otvoreno u isto vrijeme — ova metoda jednostavno prelazi između dva odvojena modala.

Otvori prvi modal

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

Promjena animacije

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

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

Još jedno nadjačavanje je opcija iskačućeg modala koji pokriva korisnički okvir za prikaz, dostupna putem modifikatorskih klasa koje se nalaze na .modal-dialog.

Klasa	Dostupnost
`.modal-fullscreen`	Stalno
`.modal-fullscreen-sm-down`	Ispod`576px`
`.modal-fullscreen-md-down`	Ispod`768px`
`.modal-fullscreen-lg-down`	Ispod`992px`
`.modal-fullscreen-xl-down`	Ispod`1200px`
`.modal-fullscreen-xxl-down`	Ispod`1400px`

<!-- 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 zaslonu generiraju se putem $breakpointskarte 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);
      }
    }
  }
}

Korištenje

Modalni dodatak prebacuje vaš skriveni sadržaj na zahtjev, putem atributa podataka ili JavaScripta. Također nadjačava zadano ponašanje pomicanja i generira .modal-backdropza pružanje područja klika za odbacivanje prikazanih modala kada se klikne izvan modala.

Preko atributa podataka

Prebacivanje

Aktivirajte modal bez pisanja JavaScripta. Postavite data-bs-toggle="modal"na element kontrolera, poput gumba, zajedno s data-bs-target="#foo"ili href="#foo"za ciljanje određenog modala za prebacivanje.

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

Odbaciti

Odbacivanje se može postići dataatributom 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 gumbu izvan modala koristeći data-bs-targetkako je prikazano u nastavku:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

Iako su podržana oba načina za odbacivanje modala, imajte na umu da odbacivanje izvan modala ne odgovara uzorku dizajna modalnog dijaloškog okvira WAI-ARIA . Učinite to na vlastitu odgovornost.

Preko JavaScripta

Stvorite modal s jednim redom JavaScripta:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Mogućnosti

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	Zadano	Opis
`backdrop`	booleov ili niz`'static'`	`true`	Uključuje element modalne pozadine. Alternativno, navedite `static`za pozadinu koja ne zatvara modal na klik.
`keyboard`	Booleov	`true`	Zatvara modal kada se pritisne tipka za izlaz
`focus`	Booleov	`true`	Stavlja fokus na 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 .

Mogućnosti dodavanja

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

prebaciti

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.toggle()

pokazati

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.show()

Također, možete proslijediti DOM element kao argument koji se može primiti u modalnim događajima (kao relatedTargetsvojstvo).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

sakriti

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.hide()

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

raspolagati

Uništava modal elementa. (Uklanja pohranjene podatke na DOM elementu)

myModal.dispose()

getInstance

Statička metoda koja vam omogućuje da dobijete modalnu instancu povezanu s DOM elementom

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Statička metoda koja vam omogućuje dobivanje modalne instance povezane s DOM elementom ili stvaranje nove u slučaju da nije inicijalizirana

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

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
`show.bs.modal`	Ovaj događaj aktivira se odmah kada `show`se pozove metoda instance. Ako je uzrokovan klikom, kliknuti element dostupan je kao `relatedTarget`svojstvo događaja.
`shown.bs.modal`	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 `relatedTarget`svojstvo događaja.
`hide.bs.modal`	Ovaj se događaj aktivira odmah nakon `hide`pozivanja metode instance.
`hidden.bs.modal`	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 `static`i klik izvan modala ili pritisak tipke za izlaz izvodi se s opcijom tipkovnice ili `data-bs-keyboard`postavljenom na `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})