Modální

Pomocí modálního pluginu JavaScript od Bootstrapu přidejte na svůj web dialogy pro světelné boxy, upozornění uživatelů nebo zcela vlastní obsah.

Na této straně

Jak to funguje

Než začnete s modální komponentou Bootstrap, přečtěte si následující informace, protože naše možnosti nabídky se nedávno změnily.

Modály jsou vytvořeny pomocí HTML, CSS a JavaScriptu. Jsou umístěny nad vším ostatním v dokumentu a odstraňují rolování z dokumentu, <body>takže se místo toho posouvá modální obsah.
Kliknutím na modální „pozadí“ se modal automaticky zavře.
Bootstrap podporuje vždy pouze jedno modální okno. Vnořené modály nejsou podporovány, protože se domníváme, že jsou špatné pro uživatele.
Modály používají position: fixed, což může být někdy trochu zvláštní na jeho vykreslování. Kdykoli je to možné, umístěte svůj modální kód HTML na pozici nejvyšší úrovně, abyste předešli potenciálnímu rušení jinými prvky. Pravděpodobně narazíte na problémy při vnořování .modaldo jiného pevného prvku.
Ještě jednou, kvůli position: fixed, existují určitá upozornění na používání modalů na mobilních zařízeních. Podrobnosti najdete v našich dokumentech podpory prohlížeče .
Vzhledem k tomu, jak HTML5 definuje svou sémantiku, nemá autofocusatribut HTML žádný vliv na Bootstrap modály. Chcete-li dosáhnout stejného efektu, použijte vlastní JavaScript:

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

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

Efekt animace této komponenty závisí na prefers-reduced-motiondotazu na média. Podívejte se na část s omezeným pohybem v naší dokumentaci přístupnosti .

Pokračujte ve čtení ukázek a pokynů k použití.

Příklady

Níže je uveden statický modální příklad (což znamená jeho positiona displaybyly přepsány). Zahrnuty jsou modální záhlaví, modální tělo (vyžadováno pro padding) a modální zápatí (volitelné). Žádáme vás, abyste vždy, když je to možné, zahrnuli modální záhlaví s akcemi zamítnutí nebo poskytli jinou explicitní akci pro zrušení.

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

Přepněte funkční modální demo kliknutím na tlačítko níže. Posune se dolů a zmizí z horní části 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é pozadí

Když je pozadí nastaveno na statické, modal se při kliknutí mimo něj nezavře. Chcete-li to vyzkoušet, klikněte na tlačítko níže.

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

Posouvání dlouhého obsahu

Když jsou modály příliš dlouhé pro zobrazovanou oblast nebo zařízení uživatele, posouvají se nezávisle na samotné stránce. Vyzkoušejte níže uvedenou ukázku, abyste viděli, co máme na mysli.

Můžete také vytvořit rolovací modal, který umožňuje rolování modálního těla přidáním .modal-dialog-scrollabledo .modal-dialog.

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

Svisle na střed

Přidáním .modal-dialog-centereddo .modal-dialogse modal svisle vycentruje.

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

Popisky a vyskakovací okna

Popisky a vyskakovací okna lze podle potřeby umístit do modálů . Když jsou modály zavřené, všechny popisky a vyskakovací okna v rámci se také automaticky zruší.

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

Pomocí mřížky

Využijte mřížkový systém Bootstrap v rámci modálu vnořením .container-fluiddo .modal-body. Poté použijte normální třídy mřížkového systému jako kdekoli jinde.

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

Máte spoustu tlačítek, která všechna spouštějí stejný modal s mírně odlišným obsahem? Pomocí atributůevent.relatedTarget a HTMLdata-bs-* můžete měnit obsah modálu v závislosti na tom, na které tlačítko bylo kliknuto.

Níže je živá ukázka následovaná příkladem HTML a JavaScriptu. Další informace najdete v dokumentech modálních událostí , kde najdete 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
})

Přepínání mezi modály

Přepínejte mezi více modály pomocí chytrého umístění atributů data-bs-targeta . data-bs-toggleMůžete například přepnout modální reset hesla z již otevřeného přihlašovacího modu. Upozorňujeme, že nelze otevřít více modů současně — tato metoda jednoduše přepíná mezi dvěma samostatnými modály.

Otevřete první 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>

Změna animace

Proměnná $modal-fade-transformurčuje stav transformace .modal-dialogpřed modální animací fade-in, $modal-show-transformproměnná určuje transformaci .modal-dialogna konci modální animace fade-in.

Pokud chcete například animaci přiblížení, můžete nastavit $modal-fade-transform: scale(.8).

Odebrat animaci

U modálů, které se jednoduše objeví, než aby se rozplynuly, odeberte .fadetřídu ze svého modálního označení.

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

Dynamické výšky

Pokud se výška modálu změní, když je otevřený, měli byste zavolat myModal.handleUpdate()a upravit polohu modálu v případě, že se objeví posuvník.

Přístupnost

Nezapomeňte přidat aria-labelledby="...", s odkazem na modální název, do .modal. Kromě toho můžete zadat popis svého modálního dialogu pomocí aria-describedbyon .modal. Všimněte si, že nemusíte přidávat role="dialog", protože to již přidáváme prostřednictvím JavaScriptu.

Vkládání videí na YouTube

Vkládání videí YouTube do modálů vyžaduje další JavaScript, který není součástí Bootstrapu, aby se automaticky zastavilo přehrávání a další. Další informace najdete v tomto užitečném příspěvku Stack Overflow .

Volitelné velikosti

Modály mají tři volitelné velikosti, které jsou k dispozici prostřednictvím tříd modifikátorů pro umístění na .modal-dialog. Tyto velikosti začínají v určitých bodech přerušení, aby se zabránilo vodorovným posuvníkům na užších výřezech.

Velikost	Třída	Modální max. šířka
Malý	`.modal-sm`	`300px`
Výchozí	Žádný	`500px`
Velký	`.modal-lg`	`800px`
Extra velké	`.modal-xl`	`1140px`

Náš výchozí modal bez třídy modifikátoru představuje modal „střední“ velikosti.

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

Dalším přepsáním je možnost vyskakovat modal, který pokrývá uživatelský výřez, dostupný prostřednictvím tříd modifikátorů, které jsou umístěny na .modal-dialog.

Třída	Dostupnost
`.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

Proměnné

Přidáno ve verzi 5.2.0

Jako součást vyvíjejícího se přístupu Bootstrap proměnných CSS nyní modály používají místní proměnné CSS .modalpro .modal-backdropvylepšené přizpůsobení v reálném čase. Hodnoty pro proměnné CSS se nastavují prostřednictvím Sass, takže přizpůsobení Sass je stále podporováno.

  --#{$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 proměnné

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

Smyčka

Responzivní režimy celé obrazovky jsou generovány prostřednictvím $breakpointsmapy a smyč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žívání

Modální plugin přepíná váš skrytý obsah na vyžádání prostřednictvím datových atributů nebo JavaScriptu. Také přepíše výchozí chování při posouvání a vygeneruje .modal-backdropoblast pro kliknutí pro zrušení zobrazených modalů při kliknutí mimo modal.

Prostřednictvím datových atributů

Přepnout

Aktivujte modal bez psaní JavaScriptu. Nastavit data-bs-toggle="modal"na ovládacím prvku, jako je tlačítko, spolu s data-bs-target="#foo"nebo href="#foo"pro cíl na konkrétní modal, který chcete přepnout.

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

Zavrhnout

Propuštění lze dosáhnout pomocí dataatributu na tlačítku v rámci modu , jak je ukázáno níže:

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

nebo na tlačítko mimo modal pomocí data-bs-targetníže uvedeného:

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

Přestože jsou podporovány oba způsoby zrušení modálu, mějte na paměti, že zrušení zvenčí neodpovídá vzoru dialogového (modálního) dialogu ARIA Authoring Practices Guide . Dělejte to na vlastní nebezpečí.

Prostřednictvím JavaScriptu

Vytvořte modal s jedním řádkem JavaScriptu:

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

Možnosti

Protože volby lze předávat prostřednictvím datových atributů nebo JavaScriptu, můžete přidat název volby k data-bs-, jako v data-bs-animation="{value}". Při předávání možností prostřednictvím datových atributů se ujistěte, že jste změnili typ případu názvu možnosti z „ camelCase “ na „ kebab-case “. Použijte například data-bs-custom-class="beautifier"místo data-bs-customClass="beautifier".

Od Bootstrapu 5.2.0 všechny komponenty podporují experimentální atribut vyhrazených dat data-bs-config, který může obsahovat jednoduchou konfiguraci komponenty jako řetězec JSON. Když má prvek atributy data-bs-config='{"delay":0, "title":123}'a data-bs-title="456", konečná titlehodnota bude 456a samostatné datové atributy přepíší hodnoty uvedené na data-bs-config. Kromě toho mohou existující datové atributy obsahovat hodnoty JSON, jako je data-bs-delay='{"show":0,"hide":150}'.

název	Typ	Výchozí	Popis
`backdrop`	booleovský,`'static'`	`true`	Zahrnuje prvek modálního pozadí. Případně zadejte `static`pro pozadí, které po kliknutí neuzavře modal.
`focus`	booleovský	`true`	Při inicializaci se zaměří na modal.
`keyboard`	booleovský	`true`	Zavře modal po stisknutí klávesy Escape.

Metody

Asynchronní metody a přechody

Všechny metody API jsou asynchronní a zahajují přechod . Vrátí se k volajícímu, jakmile je přechod zahájen, ale před jeho ukončením . Kromě toho bude ignorováno volání metody na přechodové komponentě .

Další informace naleznete v naší dokumentaci k JavaScriptu .

Možnosti předávání

Aktivuje váš obsah jako modální. Přijímá volitelné možnosti object.

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

Metoda	Popis
`dispose`	Zničí modální prvek prvku. (Odstraní uložená data v prvku DOM)
`getInstance`	Statická metoda, která vám umožní získat modální instanci spojenou s prvkem DOM.
`getOrCreateInstance`	Statická metoda, která umožňuje získat modální instanci přidruženou k prvku DOM nebo vytvořit novou v případě, že nebyla inicializována.
`handleUpdate`	Ručně upravte polohu modálu, pokud se výška modálu změní, když je otevřený (tj. v případě, že se objeví posuvník).
`hide`	Ručně skryje modal. Vrátí se k volajícímu dříve, než byl modal skutečně skryt (tj. než dojde k `hidden.bs.modal`události).
`show`	Ručně otevře modal. Vrátí se k volajícímu dříve, než byl modal skutečně ukázán (tj. než dojde k `shown.bs.modal`události). Také můžete předat prvek DOM jako argument, který lze přijmout v modálních událostech (jako `relatedTarget`vlastnost). (tj `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`.
`toggle`	Ručně přepíná modal. Vrátí se k volajícímu dříve, než byl modal skutečně zobrazen nebo skryt (tj. předtím, než nastane událost `shown.bs.modal`nebo ).`hidden.bs.modal`

Události

Modální třída Bootstrapu odhaluje několik událostí pro zapojení do modální funkčnosti. Všechny modální události jsou spouštěny na samotný modal (tj. na <div class="modal">).

událost	Popis
`hide.bs.modal`	Tato událost se spustí okamžitě po `hide`zavolání metody instance.
`hidden.bs.modal`	Tato událost se spustí, když se modal dokončí skrytí před uživatelem (bude čekat na dokončení přechodů CSS).
`hidePrevented.bs.modal`	Tato událost se spustí, když je zobrazen modal, jeho pozadí `static`a je provedeno kliknutí mimo modal. Událost se spustí také při stisknutí klávesy Escape a nastavení `keyboard`možnosti na `false`.
`show.bs.modal`	Tato událost se spustí okamžitě při `show`volání metody instance. Pokud je způsobeno kliknutím, je kliknutý prvek dostupný jako `relatedTarget`vlastnost události.
`shown.bs.modal`	Tato událost se spustí, když bude modal zviditelněn pro uživatele (bude čekat na dokončení přechodů CSS). Pokud je způsobeno kliknutím, je kliknutý prvek dostupný jako `relatedTarget`vlastnost události.

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