Modalno

Uporabite Bootstrapov modalni vtičnik JavaScript, da svojemu spletnemu mestu dodate pogovorna okna za svetlobne okvirje, obvestila uporabnikov ali popolnoma prilagojeno vsebino.

Na tej strani

Kako deluje

Preden začnete uporabljati modalno komponento Bootstrap, ne pozabite prebrati naslednjega, saj so se naše menijske možnosti nedavno spremenile.

Modali so zgrajeni s HTML, CSS in JavaScript. Postavljeni so nad vse ostalo v dokumentu in odstranijo drsenje iz, <body>tako da se namesto tega premika modalna vsebina.
S klikom na modalno »ozadje« se modal samodejno zapre.
Bootstrap podpira samo eno modalno okno naenkrat. Ugnezdeni modali niso podprti, ker menimo, da povzročajo slabo uporabniško izkušnjo.
Modali uporabljajo position: fixed, kar je lahko včasih nekoliko posebno pri upodabljanju. Kadarkoli je mogoče, postavite svoj modalni HTML na položaj najvišje ravni, da se izognete morebitnim motnjam drugih elementov. .modalPri ugnezdenju znotraj drugega fiksnega elementa boste verjetno naleteli na težave .
Še enkrat, zaradi position: fixed, obstaja nekaj opozoril pri uporabi načinov na mobilnih napravah. Za podrobnosti si oglejte naše podporne dokumente za brskalnik .
Zaradi tega, kako HTML5 opredeljuje svojo semantiko, atribut autofocusHTML nima vpliva na modale Bootstrap. Če želite doseči enak učinek, uporabite JavaScript po meri:

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

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

Učinek animacije te komponente je odvisen od prefers-reduced-motionmedijske poizvedbe. Oglejte si razdelek o zmanjšanem gibanju v naši dokumentaciji o dostopnosti .

Nadaljujte z branjem za predstavitve in navodila za uporabo.

Primeri

Spodaj je primer statičnega načina (kar pomeni , da sta bila positionin displaysta bila preglasena). Vključeni so modalna glava, modalno telo (potrebno za padding) in modalna noga (neobvezno). Prosimo vas, da vključite modalne glave z dejanji opustitve, kadar koli je to mogoče, ali zagotovite drugo izrecno dejanje opustitve.

<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 v živo

Preklopite delujočo modalno predstavitev s klikom na spodnji gumb. Zdrsel bo navzdol in zbledel z vrha strani.

<!-- 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čno ozadje

Ko je ozadje nastavljeno na statično, se modal ne bo zaprl, ko kliknete zunaj njega. Kliknite spodnji gumb, da poskusite.

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

Drsenje po dolgi vsebini

Ko modali postanejo predolgi za uporabnikovo vidno polje ali napravo, se premikajo neodvisno od same strani. Preizkusite spodnjo predstavitev, da vidite, kaj mislimo.

Ustvarite lahko tudi drsni modal, ki omogoča drsenje po telesu modala z dodajanjem .modal-dialog-scrollablev .modal-dialog.

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

Navpično sredinsko

Dodajte .modal-dialog-centeredza .modal-dialognavpično 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>

Namigi orodij in pojavna okna

Namige orodij in pojavna okna lahko po potrebi umestite v modale. Ko so modali zaprti, so vsi namigi orodij in pojavni elementi v njih samodejno opuščeni.

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

Uporaba mreže

Uporabite mrežni sistem Bootstrap znotraj modala z ugnezdenjem .container-fluidznotraj .modal-body. Nato uporabite običajne razrede omrežnega sistema kot kjer koli drugje.

<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 kup gumbov, ki sprožijo isti način z nekoliko drugačno vsebino? Uporabite atributeevent.relatedTarget in HTMLdata-bs-* za spreminjanje vsebine modala glede na to, kateri gumb je bil kliknjen.

Spodaj je predstavitev v živo, ki ji sledita primera HTML in JavaScript. Za več informacij preberite dokumente o modalnih dogodkih za podrobnosti 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
})

Preklapljanje med načini

Preklapljajte med več modali z nekaj pametne postavitve atributov data-bs-targetin . data-bs-toggleNa primer, lahko preklopite modal za ponastavitev gesla znotraj že odprtega modala za prijavo. Upoštevajte, da več načinov ni mogoče odpreti hkrati — ta metoda preprosto preklaplja med dvema ločenima načinoma.

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

Spremeni animacijo

Spremenljivka $modal-fade-transformdoloča stanje transformacije .modal-dialogpred modalno postopoma animacijo, $modal-show-transformspremenljivka določa transformacijo .modal-dialogna koncu modalne postopoma animacije.

Če želite na primer animacijo za povečavo, lahko nastavite $modal-fade-transform: scale(.8).

Odstrani animacijo

Za modale, ki se preprosto prikažejo, namesto da bi zbledeli, odstranite .faderazred iz svoje modalne oznake.

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Dinamične višine

Če se višina modala spremeni, medtem ko je odprt, morate poklicati myModal.handleUpdate(), da ponovno prilagodite položaj modala, če se pojavi drsni trak.

Dostopnost

Prepričajte se, da dodate aria-labelledby="...", ki se nanaša na modalni naslov, v .modal. Poleg tega lahko podate opis svojega modalnega pogovornega okna z aria-describedbyon .modal. Upoštevajte, da vam ni treba dodajati, role="dialog"saj ga že dodajamo prek JavaScripta.

Vdelava YouTube videoposnetkov

Vdelava YouTube videoposnetkov v modale zahteva dodaten JavaScript, ki ni v programu Bootstrap, za samodejno zaustavitev predvajanja in več. Za več informacij si oglejte to koristno objavo Stack Overflow .

Izbirne velikosti

Modali imajo tri izbirne velikosti, ki so na voljo prek razredov modifikatorjev, ki jih je treba postaviti na .modal-dialog. Te velikosti se začnejo pojavljati na določenih prelomnih točkah, da se izognejo vodoravnim drsnim trakom na ožjih pogledih.

Velikost	Razred	Največja modalna širina
majhna	`.modal-sm`	`300px`
Privzeto	Noben	`500px`
Velik	`.modal-lg`	`800px`
Zelo velik	`.modal-xl`	`1140px`

Naš privzeti modalni razred brez modifikatorja predstavlja modal »srednje« velikosti.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Druga preglasitev je možnost pojavnega modala, ki pokriva uporabniško vidno polje, ki je na voljo prek modifikatorskih razredov, ki so postavljeni na .modal-dialog.

Razred	Razpoložljivost
`.modal-fullscreen`	Nenehno
`.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

Spremenljivke

Dodano v v5.2.0

Kot del Bootstrapovega razvijajočega se pristopa spremenljivk CSS modali zdaj uporabljajo lokalne spremenljivke CSS na .modalin .modal-backdropza izboljšano prilagajanje v realnem času. Vrednosti za spremenljivke CSS so nastavljene prek Sass, tako da je še vedno podprto tudi prilagajanje Sass.

  --#{$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 spremenljivke

$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);

Zanka

Odzivni celozaslonski načini se ustvarijo prek $breakpointszemljevida in zanke v 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;
      }
    }
  }
}

Uporaba

Modalni vtičnik preklaplja vašo skrito vsebino na zahtevo prek podatkovnih atributov ali JavaScripta. Prav tako preglasi privzeto vedenje drsenja in generira, .modal-backdropda zagotovi območje klika za opustitev prikazanih modal, ko kliknete zunaj modala.

Preko podatkovnih atributov

Preklopi

Aktivirajte modal brez pisanja JavaScripta. Nastavite data-bs-toggle="modal"na element krmilnika, kot je gumb, skupaj z data-bs-target="#foo"ali href="#foo"za ciljanje določenega načina za preklop.

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

Odpusti

Odpustitev je mogoče doseči z dataatributom na gumbu znotraj modala , kot je prikazano spodaj:

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

ali na gumbu zunaj modala z uporabo, data-bs-targetkot je prikazano spodaj:

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

Čeprav sta podprta oba načina za opustitev modala, ne pozabite, da se opustitev zunaj modala ne ujema z vzorcem pogovornega okna (modalnega) Vodnika za avtorske prakse ARIA . To storite na lastno odgovornost.

Prek JavaScripta

Ustvarite modal z eno vrstico JavaScripta:

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

Opcije

Ker je možnosti mogoče posredovati prek podatkovnih atributov ali JavaScripta, lahko dodate ime možnosti v data-bs-, kot v data-bs-animation="{value}". Prepričajte se, da ste spremenili vrsto malega črke imena možnosti iz " camelCase " v " kebab-case ", ko posredujete možnosti prek podatkovnih atributov. Na primer, uporabite data-bs-custom-class="beautifier"namesto data-bs-customClass="beautifier".

Od Bootstrap 5.2.0 naprej vse komponente podpirajo poskusni atribut rezerviranih podatkov, data-bs-configki lahko hrani preprosto konfiguracijo komponente kot niz JSON. Ko ima element atribute data-bs-config='{"delay":0, "title":123}'in data-bs-title="456", bo končna titlevrednost 456in ločeni atributi podatkov bodo preglasili vrednosti, podane na data-bs-config. Poleg tega lahko obstoječi atributi podatkov hranijo vrednosti JSON, kot je data-bs-delay='{"show":0,"hide":150}'.

Ime	Vrsta	Privzeto	Opis
`backdrop`	logična vrednost,`'static'`	`true`	Vključuje element modalne kulise. Druga možnost je, da določite `static`za ozadje, ki ob kliku ne zapre modala.
`focus`	logično	`true`	Po inicializaciji se osredotoči na modal.
`keyboard`	logično	`true`	Zapre modal, ko pritisnete tipko za izhod.

Metode

Asinhrone metode in prehodi

Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .

Za več informacij si oglejte našo dokumentacijo JavaScript .

Možnosti prehoda

Aktivira vašo vsebino kot modalno. Sprejema neobvezne možnosti object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})

Metoda	Opis
`dispose`	Uniči modalnost elementa. (Odstrani shranjene podatke v elementu DOM)
`getInstance`	Statična metoda, ki vam omogoča pridobitev modalne instance, povezane z elementom DOM.
`getOrCreateInstance`	Statična metoda, ki vam omogoča, da pridobite modalni primerek, povezan z elementom DOM, ali ustvarite novega, če ni bil inicializiran.
`handleUpdate`	Ročno znova prilagodite položaj modala, če se višina modala spremeni, ko je odprt (tj. če se pojavi drsni trak).
`hide`	Ročno skrije modal. Vrne se klicatelju, preden je bil modal dejansko skrit (tj. preden `hidden.bs.modal`pride do dogodka).
`show`	Ročno odpre modal. Vrne se klicatelju, preden je modal dejansko prikazan (tj. preden `shown.bs.modal`pride do dogodka). Prav tako lahko posredujete element DOM kot argument, ki ga lahko prejmete v modalnih dogodkih (kot `relatedTarget`lastnost). (tj `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.
`toggle`	Ročno preklopi modal. Vrne se klicatelju, preden je modal dejansko prikazan ali skrit (tj. preden pride do dogodka `shown.bs.modal`ali ).`hidden.bs.modal`

Dogodki

Modalni razred Bootstrapa izpostavlja nekaj dogodkov za priključitev na modalno funkcionalnost. Vsi modalni dogodki se sprožijo na samem modalu (tj. na <div class="modal">).

Dogodek	Opis
`hide.bs.modal`	Ta dogodek se sproži takoj, ko `hide`je bila poklicana metoda primerka.
`hidden.bs.modal`	Ta dogodek se sproži, ko je modal prenehal biti skrit pred uporabnikom (počakal bo, da se zaključijo prehodi CSS).
`hidePrevented.bs.modal`	Ta dogodek se sproži, ko je prikazan modal, njegovo ozadje je `static`in se izvede klik zunaj modala. Dogodek se sproži tudi, ko pritisnete tipko za izhod in je `keyboard`možnost nastavljena na `false`.
`show.bs.modal`	Ta dogodek se sproži takoj, ko `show`se pokliče metoda primerka. Če je vzrok klik, je kliknjeni element na voljo kot `relatedTarget`lastnost dogodka.
`shown.bs.modal`	Ta dogodek se sproži, ko je modal viden uporabniku (počakal bo, da se zaključijo prehodi CSS). Če je vzrok klik, je kliknjeni element na voljo kot `relatedTarget`lastnost dogodka.

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