Modální

Pomocí modálního pluginu JavaScriptu Bootstrap 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:

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

myModal.addEventListener('shown.bs.modal', function () {
  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 popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

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.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

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

<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" data-bs-dismiss="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" data-bs-dismiss="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`	Níže`576px`
`.modal-fullscreen-md-down`	Níže`768px`
`.modal-fullscreen-lg-down`	Níže`992px`
`.modal-fullscreen-xl-down`	Níže`1200px`
`.modal-fullscreen-xxl-down`	Níže`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

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:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

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 {
        @include border-radius(0);
      }

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

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

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ů

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>

Prostřednictvím JavaScriptu

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

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

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-bs-, jako v data-bs-backdrop="".

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

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 ještě 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.

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

přepnout

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.modalnebo ).hidden.bs.modal

myModal.toggle()

ukázat

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.modaludálosti).

myModal.show()

Také můžete předat prvek DOM jako argument, který lze přijmout v modálních událostech (jako relatedTargetvlastnost).

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

skrýt

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.modaludálosti).

myModal.hide()

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

myModal.handleUpdate()

zlikvidovat

Zničí modální prvek prvku. (Odstraní uložená data v prvku DOM)

myModal.dispose()

getInstance

Statická metoda, která vám umožní získat modální instanci spojenou s prvkem DOM

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

getOrCreateInstance

Statická metoda, která vám umožní získat modální instanci přidruženou k prvku DOM nebo vytvořit novou v případě, že nebyla inicializována

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

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

Typ události	Popis
`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.
`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 kliknutí mimo modal nebo stisknutí klávesy Escape s možností klávesnice nebo `data-bs-keyboard`nastavenou na `false`.

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