Source

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.

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:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

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" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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-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-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</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.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Svisle na střed

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</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-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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-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ůzný modální obsah

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-* (případně prostřednictvím jQuery ) 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-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <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-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

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" role="dialog" 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').modal('handleUpdate')a upravit polohu modálu v případě, že se objeví posuvník.

Přístupnost

Nezapomeňte přidat role="dialog"a aria-labelledby="...", odkazující na modální název, na .modala role="document"na .modal-dialogsamotný. Kromě toho můžete zadat popis svého modálního dialogu pomocí aria-describedbyon .modal.

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í dvě 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.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Používání

Modální plugin přepíná váš skrytý obsah na vyžádání prostřednictvím datových atributů nebo JavaScriptu. Přidává také .modal-openk <body>přepsání výchozího chování posouvání a generuje .modal-backdropoblast pro kliknutí pro zrušení zobrazených modů při kliknutí mimo modal.

Prostřednictvím datových atributů

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

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

Prostřednictvím JavaScriptu

Zavolejte modal s id myModalpomocí jediného řádku JavaScriptu:

$('#myModal').modal(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-, jako v data-backdrop="".

název Typ Výchozí Popis
pozadí boolean nebo řetězec'static' skutečný Zahrnuje prvek modálního pozadí. Případně zadejte staticpro pozadí, které neuzavře modal po kliknutí.
klávesnice booleovský skutečný Zavře modal po stisknutí klávesy Escape
zaměřit se booleovský skutečný Při inicializaci se zaměří na modal.
ukázat booleovský skutečný Po inicializaci zobrazí 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 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.

.modal(options)

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

$('#myModal').modal({
  keyboard: false
})

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

$('#myModal').modal('toggle')

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

$('#myModal').modal('show')

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

$('#myModal').modal('hide')

.modal('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').modal('handleUpdate')

.modal('dispose')

Zničí modální prvek prvku.

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 showvolání metody instance. Pokud je způsobeno kliknutím, je kliknutý prvek dostupný jako relatedTargetvlastnost události.
zobrazeno.bs.modální 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 relatedTargetvlastnost události.
hide.bs.modal Tato událost se spustí okamžitě po hidezavolání metody instance.
skrytý.bs.modální Tato událost se spustí, když se modal dokončí skrytí před uživatelem (bude čekat na dokončení přechodů CSS). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})