Prijeđi na glavni sadržaj Prijeđi na navigaciju dokumentima
Check
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:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

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

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="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" data-bs-toggle="popover" 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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" 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>

Različiti modalni sadržaji

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.

html 
<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>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const 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.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const 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 se više modala ne može otvoriti u isto vrijeme — ova metoda jednostavno prelazi između dva odvojena modala.

Otvori prvi modal
html 
<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, the$modal-show-transform varijabla 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 mijenja dok je otvoren, trebali biste nazvatimyModal.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>

Cijeli zaslon Modal

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 576px
.modal-fullscreen-md-down 768px
.modal-fullscreen-lg-down 992px
.modal-fullscreen-xl-down 1200px
.modal-fullscreen-xxl-down 1400px 
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

CSS

Varijable

Dodano u v5.2.0

Kao dio Bootstrapovog pristupa CSS varijablama koji se razvija, modali sada koriste lokalne CSS varijable na .modali .modal-backdropza poboljšanu prilagodbu u stvarnom vremenu. Vrijednosti za CSS varijable postavljaju se putem Sass-a, tako da je i dalje podržana prilagodba Sass-a.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

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:        var(--#{$prefix}border-color-translucent);
$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:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$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,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}

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 dijaloškom (modalnom) uzorku Vodiča za autorske prakse ARIA . Učinite to na vlastitu odgovornost.

Preko JavaScripta

Stvorite modal s jednim redom JavaScripta:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Mogućnosti

Kako se opcije mogu proslijediti putem atributa podataka ili JavaScripta, možete dodati naziv opcije u data-bs-, kao u data-bs-animation="{value}". Obavezno promijenite vrstu velikih i malih slova naziva opcije iz “ camelCase ” u “ kebab-case ” kada prosljeđujete opcije putem atributa podataka. Na primjer, koristite data-bs-custom-class="beautifier"umjestodata-bs-customClass="beautifier" .

Od Bootstrapa 5.2.0, sve komponente podržavaju eksperimentalni atribut rezerviranih podataka data-bs-configkoji može sadržavati jednostavnu konfiguraciju komponente kao JSON niz. Kada element ima atribute data-bs-config='{"delay":0, "title":123}'i data-bs-title="456", konačna titlevrijednost će biti 456, a zasebni atributi podataka nadjačat će vrijednosti dane na data-bs-config. Osim toga, postojeći atributi podataka mogu sadržavati JSON vrijednosti poput data-bs-delay='{"show":0,"hide":150}'.

Ime Tip Zadano Opis
backdrop Booleov,'static' true Uključuje element modalne pozadine. Alternativno, navedite staticza pozadinu koja ne zatvara modal kada se klikne.
focus Booleov true Stavlja fokus na modal kada se inicijalizira.
keyboard Booleov true Zatvara modal kada se pritisne tipka za izlaz.

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.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
metoda Opis
dispose Uništava modal elementa. (Uklanja pohranjene podatke na DOM elementu)
getInstance Statička metoda koja vam omogućuje da dobijete modalnu instancu povezanu s DOM elementom.
getOrCreateInstance Statička metoda koja vam omogućuje dobivanje modalne instance povezane s DOM elementom ili stvaranje nove u slučaju da nije inicijalizirana.
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).
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).
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). Također, možete proslijediti DOM element kao argument koji se može primiti u modalnim događajima (kao relatedTargetsvojstvo). (tj const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
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

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

Događaj Opis
hide.bs.modal Ovaj se događaj aktivira odmah nakon hidepozivanja 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 prikaže modal, njegova pozadina je statici kada se izvede klik izvan modala. Događaj se također pokreće kada se pritisne tipka za izlaz i keyboardopcija je postavljena na false.
show.bs.modal Ovaj događaj aktivira se odmah kada showse pozove metoda instance. Ako je uzrokovan klikom, kliknuti element dostupan je kao relatedTargetsvojstvo 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 relatedTargetsvojstvo događaja. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})