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.
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í.modal
do 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á
autofocus
atribut 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()
})
prefers-reduced-motion
dotazu 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
Modální komponenty
Níže je uveden statický modální příklad (což znamená jeho position
a display
byly 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-scrollable
do .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Svisle na střed
Přidáním .modal-dialog-centered
do .modal-dialog
se 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-fluid
do .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>
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-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-target
a . data-bs-toggle
Můž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.
<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-transform
určuje stav transformace .modal-dialog
před modální animací fade-in, $modal-show-transform
proměnná určuje transformaci .modal-dialog
na 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 .fade
tří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-describedby
on .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>
Režim celé obrazovky
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íže576px |
.modal-fullscreen-md-down |
Níže768px |
.modal-fullscreen-lg-down |
Níže992px |
.modal-fullscreen-xl-down |
Níže1200px |
.modal-fullscreen-xxl-down |
Níže1400px |
<!-- 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 $breakpoints
mapy 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-backdrop
oblast 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.modal
nebo ).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.modal
události).
myModal.show()
Také můžete předat prvek DOM jako argument, který lze přijmout v modálních událostech (jako relatedTarget
vlastnost).
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.modal
udá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...
})