Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
Check
in English

Modálny

Pomocou modálneho doplnku JavaScript od Bootstrapu pridajte na svoje stránky dialógové okná pre svetelné boxy, upozornenia používateľov alebo úplne vlastný obsah.

Na tejto stránke

Ako to funguje

Skôr ako začnete s modálnym komponentom Bootstrap, prečítajte si nasledujúce informácie, pretože naše možnosti ponuky sa nedávno zmenili.

  • Modály sú vytvorené pomocou HTML, CSS a JavaScriptu. Sú umiestnené nad všetkým ostatným v dokumente a odstraňujú posúvanie z dokumentu <body>, aby sa namiesto toho posúval modálny obsah.
  • Kliknutím na modálne „pozadie“ sa modal automaticky zatvorí.
  • Bootstrap podporuje naraz iba jedno modálne okno. Vnorené modály nie sú podporované, pretože sa domnievame, že majú zlý dojem používateľa.
  • Modály používajú position: fixed, čo môže byť niekedy trochu špecifické pri jeho vykresľovaní. Vždy, keď je to možné, umiestnite svoj modálny kód HTML na najvyššiu úroveň, aby ste predišli potenciálnemu rušeniu z iných prvkov. Pri vnorení .modaldo iného pevného prvku pravdepodobne narazíte na problémy.
  • Ešte raz, kvôli position: fixed, existuje niekoľko upozornení na používanie modálov na mobilných zariadeniach. Podrobnosti nájdete v našich dokumentoch podpory prehliadača .
  • Vzhľadom na to, ako HTML5 definuje svoju sémantiku, atribút autofocusHTML nemá žiadny vplyv na modály Bootstrap. Ak chcete dosiahnuť rovnaký efekt, použite vlastný JavaScript:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Animačný efekt tohto komponentu závisí od prefers-reduced-motionmediálneho dopytu. Pozrite si časť so zníženým pohybom v našej dokumentácii o prístupnosti .

Pokračujte v čítaní ukážok a pokynov na používanie.

Príklady

Nižšie je uvedený statický modálny príklad (čo znamená jeho positiona displayboli prepísané). Zahrnuté sú modálna hlavička, modálne telo (povinné pre padding) a modálna päta (voliteľné). Žiadame, aby ste vždy, keď je to možné, zahrnuli modálne hlavičky s akciami odmietnutia alebo poskytli inú explicitnú akciu odmietnutia.

Modálny názov

Tu je modálny hlavný text.

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

Živá ukážka

Prepnite ukážku pracovného modu kliknutím na tlačidlo nižšie. Posunie sa nadol a bude miznúť z hornej časti stránky.

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

Statické pozadie

Keď je pozadie nastavené na statické, modál sa nezatvorí, keď kliknete mimo neho. Kliknutím na tlačidlo nižšie to vyskúšate.

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

Posúvanie dlhého obsahu

Keď sú modály príliš dlhé pre zobrazovanú oblasť alebo zariadenie používateľa, posúvajú sa nezávisle od samotnej stránky. Vyskúšajte ukážku nižšie, aby ste videli, čo máme na mysli.

Môžete tiež vytvoriť rolovací modal, ktorý umožňuje rolovanie modálneho tela pridaním .modal-dialog-scrollabledo .modal-dialog.

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

Vertikálne vycentrované

Pridať .modal-dialog-centereddo .modal-dialog, aby sa modal zvislo vycentroval.

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

Popisy a kontextové okná

Popisy nástrojov a kontextové okná možno podľa potreby umiestniť do modálov . Keď sú modály zatvorené, všetky popisy a kontextové okná v rámci sa tiež automaticky zatvoria.

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

Pomocou mriežky

Využite mriežkový systém Bootstrap v rámci modálu vnorením .container-fluidsa do .modal-body. Potom použite normálne triedy mriežkového systému ako kdekoľvek inde.

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

Rôzny modálny obsah

Máte veľa tlačidiel, ktoré spúšťajú rovnaký modál s mierne odlišným obsahom? Pomocou atribútovevent.relatedTarget a HTMLdata-bs-* môžete meniť obsah modálu v závislosti od toho, na ktoré tlačidlo ste klikli.

Nižšie je živá ukážka, za ktorou nasleduje príklad HTML a JavaScript. Ďalšie informácie nájdete v dokumentoch k modálnym udalostiam , kde nájdete 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
})

Prepínajte medzi modálmi

Prepínajte medzi viacerými modálmi pomocou šikovného umiestnenia atribútov data-bs-targeta . data-bs-toggleMôžete napríklad prepnúť modál na obnovenie hesla z už otvoreného prihlasovacieho modálu. Upozorňujeme, že viacero modálov nemôže byť otvorených súčasne — táto metóda jednoducho prepína medzi dvoma samostatnými modálmi.

Otvorte prvý modál
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>

Zmeniť animáciu

Premenná $modal-fade-transformurčuje stav transformácie .modal-dialogpred modálnou fade-in animáciou, $modal-show-transformpremenná určuje transformáciu .modal-dialogna konci modálnej fade-in animácie.

Ak chcete napríklad animáciu priblíženia, môžete nastaviť $modal-fade-transform: scale(.8).

Odstrániť animáciu

V prípade modálov, ktoré sa jednoducho objavia, než aby sa zobrazovali, odstráňte .fadetriedu zo svojho modálneho označenia.

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

Dynamické výšky

Ak sa výška modálu zmení, keď je otvorený, mali by ste zavolať myModal.handleUpdate(), aby ste upravili polohu modálu v prípade, že sa objaví posuvník.

Prístupnosť

Nezabudnite pridať aria-labelledby="...", odkazujúc na modálny názov, do .modal. Okrem toho môžete zadať popis svojho modálneho dialógu aria-describedbypomocou .modal. Všimnite si, že ho nemusíte pridávať role="dialog", pretože ho už pridávame prostredníctvom JavaScriptu.

Vkladanie videí YouTube

Vkladanie videí YouTube do modálov vyžaduje dodatočný JavaScript, ktorý nie je súčasťou Bootstrap, aby sa prehrávanie automaticky zastavilo a ďalšie. Viac informácií nájdete v tomto užitočnom príspevku Stack Overflow .

Voliteľné veľkosti

Modály majú tri voliteľné veľkosti dostupné prostredníctvom tried modifikátorov, ktoré sa umiestnia na .modal-dialog. Tieto veľkosti sa spúšťajú v určitých bodoch prerušenia, aby sa zabránilo vodorovným posúvačom na užších výrezoch.

Veľkosť Trieda Modálna maximálna šírka
Malý .modal-sm 300px
Predvolené žiadne 500px
Veľký .modal-lg 800px
Extra veľké .modal-xl 1140px

Náš predvolený modál bez triedy modifikátorov predstavuje modál „strednej“ veľkosti.

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

Režim celej obrazovky

Ďalším prepísaním je možnosť vyskakovať modal, ktorý pokrýva používateľský výrez, dostupný prostredníctvom tried modifikátorov, ktoré sú umiestnené na .modal-dialog.

Trieda Dostupnosť
.modal-fullscreen Vždy
.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

Premenné

Pridané vo verzii 5.2.0

Ako súčasť vyvíjajúceho sa prístupu premenných CSS od Bootstrapu, modály teraz používajú lokálne premenné CSS na .modalvylepšené .modal-backdropprispôsobenie v reálnom čase. Hodnoty pre premenné CSS sa nastavujú cez Sass, takže prispôsobenie Sass je stále podporované.

  --#{$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 premenné

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

Slučka

Responzívne režimy na celú obrazovku sa generujú prostredníctvom $breakpointsmapy a slučky 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;
      }
    }
  }
}

Použitie

Modálny doplnok prepína váš skrytý obsah na požiadanie prostredníctvom atribútov údajov alebo JavaScriptu. Tiež prepíše predvolené správanie pri posúvaní a vygeneruje oblasť .modal-backdropna kliknutie na zrušenie zobrazených modálov pri kliknutí mimo modálu.

Cez dátové atribúty

Prepnúť

Aktivujte modál bez písania JavaScriptu. Nastavte data-bs-toggle="modal"na prvku ovládača, ako je tlačidlo, spolu s data-bs-target="#foo"alebo href="#foo"na zacielenie na konkrétny modál na prepínanie.

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

Odmietnuť

Zrušenie je možné dosiahnuť pomocou dataatribútu na tlačidle v rámci modálu , ako je uvedené nižšie:

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

alebo na tlačidlo mimo modálu pomocou data-bs-targetnižšie uvedeného:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Hoci sú podporované oba spôsoby zrušenia modálu, majte na pamäti, že zrušenie mimo modálu nezodpovedá vzoru dialógového (modálneho) dialógu ARIA Authoring Practices Guide . Robte to na vlastné riziko.

Cez JavaScript

Vytvorte modál s jedným riadkom JavaScriptu:

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

možnosti

Keďže možnosti možno odovzdať prostredníctvom atribútov údajov alebo jazyka JavaScript, môžete pridať názov možnosti k data-bs-, ako v data-bs-animation="{value}". Pri odovzdávaní možností cez atribúty údajov nezabudnite zmeniť typ prípadu názvu možnosti z „ camelCase “ na „ kebab-case “. Napríklad použite data-bs-custom-class="beautifier"namiesto data-bs-customClass="beautifier".

Od Bootstrapu 5.2.0 všetky komponenty podporujú experimentálny atribút rezervovaných údajov data-bs-config, ktorý môže obsahovať jednoduchú konfiguráciu komponentu ako reťazec JSON. Ak má prvok atribúty data-bs-config='{"delay":0, "title":123}'a data-bs-title="456", konečná titlehodnota bude 456a samostatné atribúty údajov prepíšu hodnoty uvedené na data-bs-config. Existujúce dátové atribúty môžu navyše obsahovať hodnoty JSON ako data-bs-delay='{"show":0,"hide":150}'.

názov Typ Predvolené Popis
backdrop boolovská hodnota,'static' true Obsahuje prvok modálneho pozadia. Prípadne zadajte staticpozadie, ktoré po kliknutí neuzavrie modál.
focus boolovská hodnota true Po inicializácii sa zameriava na modal.
keyboard boolovská hodnota true Zatvorí modal po stlačení klávesu Escape.

Metódy

Asynchrónne metódy a prechody

Všetky metódy API sú asynchrónne a spúšťajú prechod . Vrátia sa k volajúcemu hneď po spustení prechodu, ale skôr, ako sa skončí . Okrem toho bude volanie metódy na prechodovom komponente ignorované .

Viac informácií nájdete v našej dokumentácii JavaScript .

Možnosti odovzdávania

Aktivuje váš obsah ako modálny. Prijíma voliteľné možnosti object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Metóda Popis
dispose Zničí modálny prvok prvku. (Odstráni uložené údaje v prvku DOM)
getInstance Statická metóda, ktorá vám umožňuje získať modálnu inštanciu spojenú s prvkom DOM.
getOrCreateInstance Statická metóda, ktorá vám umožňuje získať modálnu inštanciu spojenú s prvkom DOM alebo vytvoriť novú v prípade, že nebola inicializovaná.
handleUpdate Ručne upravte polohu modálu, ak sa výška modálu zmení, keď je otvorený (tj v prípade, že sa objaví posuvník).
hide Manuálne skryje modal. Vráti sa k volajúcemu skôr, ako bol modal skutočne skrytý (tj predtým, ako hidden.bs.modalnastane udalosť).
show Manuálne otvorí modál. Vráti sa k volajúcemu skôr, ako sa modal skutočne ukázal (tj predtým, ako shown.bs.modalnastane udalosť). Môžete tiež odovzdať prvok DOM ako argument, ktorý možno prijať v modálnych udalostiach (ako relatedTargetvlastnosť). (tj const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Manuálne prepína modal. Vráti sa k volajúcemu predtým, ako sa modal skutočne ukázal alebo skryl (tj predtým, ako nastane udalosť shown.bs.modalalebo ).hidden.bs.modal

Diania

Modálna trieda Bootstrapu odhaľuje niekoľko udalostí na pripojenie k modálnej funkcii. Všetky modálne udalosti sa spúšťajú na samotnom modale (tj na <div class="modal">).

Udalosť Popis
hide.bs.modal Táto udalosť sa spustí okamžite po hidezavolaní metódy inštancie.
hidden.bs.modal Táto udalosť sa spustí, keď sa dokončí skrytie modálu pred používateľom (bude čakať na dokončenie prechodov CSS).
hidePrevented.bs.modal Táto udalosť sa spustí, keď sa zobrazí modál, jeho pozadie statica vykoná sa kliknutie mimo modálu. Udalosť sa spustí aj po stlačení klávesu Escape a nastavení keyboardmožnosti na false.
show.bs.modal Táto udalosť sa spustí okamžite pri showvolaní metódy inštancie. Ak je to spôsobené kliknutím, kliknutý prvok je dostupný ako relatedTargetvlastnosť udalosti.
shown.bs.modal Táto udalosť sa spustí, keď bude modal viditeľný pre používateľa (bude čakať na dokončenie prechodov CSS). Ak je to spôsobené kliknutím, kliknutý prvok je dostupný ako relatedTargetvlastnosť udalosti. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})