Modálny
Pomocou modálneho doplnku JavaScript od Bootstrapu pridajte na svoju stránku dialógové okná pre svetelné boxy, upozornenia používateľov alebo úplne vlastný obsah.
Ako to funguje
Skôr ako začnete s modálnym komponentom Bootstrap, prečítajte si nasledujúce informácie, pretože naše možnosti ponuky sa nedávno zmenili.
- Modály sú vytvorené pomocou HTML, CSS a JavaScriptu. Sú umiestnené nad všetkým ostatným v dokumente a odstraňujú posúvanie z dokumentu
<body>
, aby sa namiesto toho posúval modálny obsah. - Kliknutím na modálne „pozadie“ sa modal automaticky zatvorí.
- Bootstrap podporuje naraz iba jedno modálne okno. Vnorené modály nie sú podporované, pretože sa domnievame, že majú zlý dojem používateľa.
- Modály používajú
position: fixed
, čo môže byť niekedy trochu špecifické pri jeho vykresľovaní. Vždy, keď je to možné, umiestnite svoj modálny kód HTML na najvyššiu úroveň, aby ste predišli potenciálnemu rušeniu z iných prvkov. Pri vnorení.modal
do iného pevného prvku pravdepodobne narazíte na problémy. - Ešte raz, kvôli
position: fixed
, existuje niekoľko upozornení na používanie modálov na mobilných zariadeniach. Podrobnosti nájdete v našich dokumentoch podpory prehliadača . - Vzhľadom na to, ako HTML5 definuje svoju sémantiku, atribút
autofocus
HTML nemá žiadny vplyv na modály Bootstrap. Ak chcete dosiahnuť rovnaký efekt, použite vlastný JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
mediálneho dopytu. Pozrite si
časť so zníženým pohybom v našej dokumentácii o prístupnosti .
Pokračujte v čítaní ukážok a pokynov na používanie.
Príklady
Modálne komponenty
Nižšie je uvedený statický modálny príklad (čo znamená jeho position
a display
boli prepísané). Zahrnuté sú modálna hlavička, modálne telo (povinné pre padding
) a modálna päta (voliteľné). Žiadame, aby ste vždy, keď je to možné, zahrnuli modálne hlavičky s akciami odmietnutia alebo poskytli inú explicitnú akciu odmietnutia.
<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">×</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á ukážka
Prepnite ukážku pracovného modu kliknutím na tlačidlo nižšie. Posunie sa nadol a bude miznúť z hornej časti 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">×</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é pozadie
Keď je pozadie nastavené na statické, modál sa nezatvorí, keď kliknete mimo neho. Kliknutím na tlačidlo nižšie to vyskúšate.
<!-- 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">×</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>
Posúvanie dlhého obsahu
Keď sú modály príliš dlhé pre zobrazovanú oblasť alebo zariadenie používateľa, posúvajú sa nezávisle od samotnej stránky. Vyskúšajte ukážku nižšie, aby ste videli, čo máme na mysli.
Môžete tiež vytvoriť rolovateľný modal, ktorý umožňuje rolovanie modálneho tela pridaním .modal-dialog-scrollable
do .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Vertikálne vycentrované
Pridať .modal-dialog-centered
do .modal-dialog
, aby sa modal zvislo vycentroval.
<!-- 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>
Popisy a kontextové okná
Popisy nástrojov a vyskakovacie okná možno podľa potreby umiestniť do modálov . Keď sú modály zatvorené, všetky popisy a kontextové okná v rámci sa tiež automaticky zatvoria.
<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>
Pomocou mriežky
Využite mriežkový systém Bootstrap v rámci modálu vnorením .container-fluid
sa do .modal-body
. Potom použite normálne triedy mriežkového systému ako kdekoľvek inde.
<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ôzny modálny obsah
Máte veľa tlačidiel, ktoré spúšťajú rovnaký modál s mierne odlišným obsahom? Použite event.relatedTarget
a HTML data-*
atribúty (prípadne cez jQuery ) na zmenu obsahu modálu v závislosti od toho, na ktoré tlačidlo ste klikli.
Nižšie je živá ukážka, za ktorou nasleduje príklad HTML a JavaScript. Ďalšie informácie nájdete v dokumentoch k modálnym udalostiam , kde nájdete 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">×</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)
})
Zmeniť animáciu
Premenná $modal-fade-transform
určuje stav transformácie .modal-dialog
pred modálnou fade-in animáciou, $modal-show-transform
premenná určuje transformáciu .modal-dialog
na konci modálnej fade-in animácie.
Ak chcete napríklad animáciu priblíženia, môžete nastaviť $modal-fade-transform: scale(.8)
.
Odstrániť animáciu
V prípade modálov, ktoré sa jednoducho objavia, než aby sa zobrazovali, odstráňte .fade
triedu zo svojho modálneho označenia.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Dynamické výšky
Ak sa výška modálu zmení, keď je otvorený, mali by ste zavolať $('#myModal').modal('handleUpdate')
, aby ste upravili polohu modálu v prípade, že sa objaví posuvník.
Prístupnosť
Nezabudnite pridať aria-labelledby="..."
, odkazujúc na modálny názov, do .modal
. Okrem toho môžete zadať popis svojho modálneho dialógu aria-describedby
pomocou .modal
. Všimnite si, že ho nemusíte pridávať role="dialog"
, pretože ho už pridávame prostredníctvom JavaScriptu.
Vkladanie videí YouTube
Vkladanie videí YouTube do modálov vyžaduje dodatočný JavaScript, ktorý nie je súčasťou Bootstrap, aby sa prehrávanie automaticky zastavilo a ďalšie. Viac informácií nájdete v tomto užitočnom príspevku Stack Overflow .
Voliteľné veľkosti
Modály majú tri voliteľné veľkosti dostupné prostredníctvom tried modifikátorov, ktoré sa umiestnia na .modal-dialog
. Tieto veľkosti sa spúšťajú v určitých bodoch prerušenia, aby sa zabránilo vodorovným posúvačom na užších výrezoch.
Veľkosť | Trieda | Modálna maximálna šírka |
---|---|---|
Malý | .modal-sm |
300px |
Predvolené | žiadne | 500px |
Veľký | .modal-lg |
800px |
Extra veľké | .modal-xl |
1140px |
Náš predvolený modál bez triedy modifikátorov predstavuje modál „strednej“ veľkosti.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Použitie
Modálny doplnok prepína váš skrytý obsah na požiadanie prostredníctvom atribútov údajov alebo JavaScriptu. Pridáva tiež .modal-open
k <body>
prepísaniu predvoleného správania rolovania a generuje oblasť .modal-backdrop
na kliknutie na zatvorenie zobrazených modálov pri kliknutí mimo modálu.
Cez dátové atribúty
Aktivujte modál bez písania JavaScriptu. Nastavte data-toggle="modal"
na prvku ovládača, ako je tlačidlo, spolu s data-target="#foo"
alebo href="#foo"
na zacielenie na konkrétny modál na prepínanie.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Cez JavaScript
Zavolajte modal s ID myModal
s jedným riadkom JavaScriptu:
$('#myModal').modal(options)
možnosti
Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-
, ako v data-backdrop=""
.
názov | Typ | Predvolené | Popis |
---|---|---|---|
pozadie | boolean alebo reťazec'static' |
pravda | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
keyboard | boolean | true | Closes the modal when escape key is pressed |
focus | boolean | true | Puts the focus on the modal when initialized. |
show | boolean | true | Shows the modal when initialized. |
Methods
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
.modal(options)
Activates your content as a modal. Accepts an optional options object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
Manuálne prepína modal. Vráti sa k volajúcemu predtým, ako sa modal skutočne ukázal alebo skryl (tj predtým, ako nastane udalosť shown.bs.modal
alebo ).hidden.bs.modal
$('#myModal').modal('toggle')
.modal('show')
Manuálne otvorí modál. Vráti sa k volajúcemu skôr, ako sa modal skutočne ukázal (tj predtým, ako shown.bs.modal
nastane udalosť).
$('#myModal').modal('show')
.modal('hide')
Manuálne skryje modal. Vráti sa k volajúcemu skôr, ako bol modal skutočne skrytý (tj predtým, ako hidden.bs.modal
nastane udalosť).
$('#myModal').modal('hide')
.modal('handleUpdate')
Ručne upravte polohu modálu, ak sa výška modálu zmení, keď je otvorený (tj v prípade, že sa objaví posuvník).
$('#myModal').modal('handleUpdate')
.modal('dispose')
Zničí modálny prvok prvku.
Diania
Modálna trieda Bootstrapu odhaľuje niekoľko udalostí na pripojenie k modálnej funkcii. Všetky modálne udalosti sa spúšťajú na samotnom modale (tj na <div class="modal">
).
Typ udalosti | Popis |
---|---|
show.bs.modal | Táto udalosť sa spustí okamžite po show zavolaní metódy inštancie. Ak je to spôsobené kliknutím, kliknutý prvok je dostupný ako relatedTarget vlastnosť udalosti. |
zobrazené.bs.modálne | Táto udalosť sa spustí, keď bude modal viditeľný pre používateľa (bude čakať na dokončenie prechodov CSS). Ak je to spôsobené kliknutím, kliknutý prvok je dostupný ako relatedTarget vlastnosť udalosti. |
hide.bs.modal | Táto udalosť sa spustí okamžite po hide zavolaní metódy inštancie. |
skrytý.bs.modálny | Táto udalosť sa spustí, keď sa dokončí skrytie modálu pred používateľom (bude čakať na dokončenie prechodov CSS). |
hidePrevented.bs.modal | Táto udalosť sa spustí, keď je zobrazený modál, jeho pozadie static a kliknutie mimo modálu alebo stlačenie klávesu Escape s možnosťou klávesnice alebo data-keyboard nastavenou na false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})