in English

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')
})

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

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-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="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">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.

What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

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.

What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

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

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" 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="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)
})

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

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 `static`pro 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 `show`volání metody instance. Pokud je způsobeno kliknutím, je kliknutý prvek dostupný jako `relatedTarget`vlastnost 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 `relatedTarget`vlastnost události.
hide.bs.modal	Tato událost se spustí okamžitě po `hide`zavolá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).
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-keyboard`nastavenou na `false`.

$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})