23. diel - Bootstrap - Modálne dialógy
V minulej lekcii, Bootstrap - Paginace, Upozornenie a Drobečková navigácie , sme pokračovali v prehliadke Bootstrap komponentov. V dnešnom tutoriále populárneho CSS frameworku budeme pokračovať vo rovnakému duchu. Reč bude o modálnych dialógoch.
Hoci pop-upy, prekrývajúci obsah, sa na web úplne nehodí, občas sa mu
nevyhneme. Jedná sa napr. O situáciu, keď sa chceme používateľa opýtať,
či si skutočne želá zavrieť záložku, pretože má rozrobenú prácu. K
tomuto účelu by sme síce mohli použiť natívne JavaScriptové dialógy
(confirm()
, prompt()
, alert()
), ale tie
väčšinou nevyzerajú práve najlepšie a nemožno ich prispôsobovať.
Pop-upy sa často používajú tiež napr. K otvoreniu zväčšeniny obrázok
alebo video, aby sa zabránilo zbytočnému presmerovanie na inú stránku.
Možno je tak poznáte pod označením lightbox.
Modálne dialógy v Bootstrap
Modálne dialógy tvoríme pomocou JavaScriptu, budeme k nim teda opäť potrebovať načítať Bootstrap JavaScript plugin.
Ukážka
Ako prvý ukážku do stránky vložíme tlačidlo, ktoré po stlačení vyvolá modálne dialóg.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dialog"> Otevřít dialog </button> <div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-labelledby="dialog-label" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="dialog-label">Titulek</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Zavřít"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Text </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Zavřít</button> </div> </div> </div> </div>
Dialógy budeme na rozdiel od prevažnej väčšiny komponentov spúšťať v
praxi skôr JavaScriptom. V ukážke vyššie je dialóg otvorený pomocou
elementu <button>
a dáta atribútom
data-toggle="modal"
. Pomocou atribútu data-target
uvedieme selektor na dialóg, ktorý má tlačidlo otvoriť. Výsledok v
prehliadači:
Pre dialóg najprv vkladáme polopriehľadnou sivou vrstvu cez stránku ako
element <div>
sa triedou .modal
. Na dosiahnutie
efektu animácie pridávame ešte triedu .fade
, ak by sme animáciu
z nejakého dôvodu nechceli, tak triedu jednoducho nepridáme. K vylúčeniu
vybrania vrstvy klávesom tab uvádzame atribút
tabindex="-1"
. A konečne k dosiahnutiu podpory hlasových
čítačiek pridávame atribúty role="dialog"
,
aria-labelledby="dialog-label"
a aria-hidden="true"
.
Samotný dialóg potom vkladáme ako ďalšie <div>
sa
triedou .modal-dialog
. Ten rozdelíme na divy sa triedami
.modal-header
, .modal-body
a
.modal-footer
. Za povšimnutie stojí ešte vloženie krížika k
uzavretiu dialógu v jeho hlavičke.
Do dialógu môžeme vložiť ľubovoľný HTML obsah vrátane formulárov. Avšak pozor, nepoužívajte dialógy na reklamné oznámenie, ktorá sa otvoria hneď po navštívení stránky, Google takéto weby penalizuje.
Pri zobrazení pop-upu sa na element <body>
aplikuje
trieda .modal-open
, ktorá mu odstráni scrollbar. Môžeme tak
scrollovať obsahom pop-upu, ak sa na stránku nezmestí, namiesto aby sme
rolovalo stránkou. Bootstrap modal sa zatvorí kliknutím mimo neho. V jednej
chvíli môžeme zobraziť iba jeden taký dialóg. Pretože sa modálne
dialógy zobrazujú s fixnou pozíciou, mali by sme modálne obsah umiestniť
nad obsah stránky, aby nedošlo k prekrytiu modálneho obsahu nejakú častí
obsahu na stránke. V modálnych dialógoch nebude fungovať atribút
autofocus
. Ak by sme do dialógu umiestnili formulár a chceli
atribútu využiť, musíme namiesto neho siahnuť po JavaScriptu:
$('#dialog').on('shown.bs.modal', function () { $('#formular-jmeno').trigger('focus'); });
Ako už bolo povedané, do dialógov môžeme vložiť prakticky čokoľvek vrátane popovers alebo gridu, viď ďalej v kurze.
Predvyplnenie obsahu
Modálne dialógy môžeme predvyplniť alebo aj ľahko pozmeniť ich obsah v závislosti na udalosti, pri akej boli otvorené. Môžeme teda používať jeden modálne dialóg pre viac podobných účelov.
V ukážke nižšie vyplníme text do inputu v závislosti na stlačenom tlačidle:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dialog" data-typ="funkce">Navrhnout novou funkci</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dialog" data-typ="bug">Nahlásit bug</button> <div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-labelledby="dialog-label" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="dialog-label">Vývoj systému</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Zavřít"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="typ-pozadavku" class="col-form-label">Typ požadavku</label> <input type="text" class="form-control" id="typ-pozadavku"> </div> <div class="form-group"> <label for="text-pozadavku" class="col-form-label">Text</label> <textarea class="form-control" id="text-pozadavku"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Odeslat</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Zavřít</button> </div> </div> </div> </div>
K predvyplnenie dialógu využijeme JavaScript:
$('#dialog').on('show.bs.modal', function (event) { var button = $(event.relatedTarget); // Získáme tlačítko, kterým jsme dialog otevřeli var recipient = button.data('typ'); // Načteme informaci z data atributu $(this).find('.modal-body input').val(recipient); // Přiřadíme hodnotu do inputu });
V JavaScriptu by sme samozrejme mohli upraviť akúkoľvek časť dialógu,
načítať do neho niečo Ajaxu a podobne. Kľúčové je reakcia na udalosť
show.bs.modal
.
Výsledok v prehliadači:
Výška dialógu
Dialóg sa vycentruje v závislosti na jeho výške, ktorá sa vypočíta pri
jeho zobrazení. Ak by sme nejako dynamicky menili jeho obsah, je možné
nechať ho přepozicovat zavolaním
$('#dialog').data('bs.modal').handleUpdate();
alebo
$('#dialog').modal('handleUpdate');
.
Veľkosti
Aj dialógy môžeme vyvolať v niekoľkých veľkostiach a to pridaním
triedy elementu <div>
sa triedou .modal-dialog
,
teda druhému vnořenému divu.
.modal-lg
- Veľký dialóg- Bez triedy pre predvolenú veľkosť
.modal-sm
- Malý dialóg
Javascript
Ako už bolo povedané, JavaScript bude u modálnych dialógov vaším priateľom. Okrem vyvolanie tlačidlami s dáta atribútom môžeme dialóg vyvolať pomocou JavaScriptu ako:
$('#dialog').modal();
Vlastnosti
Pomocou dáta atribútov s prefixom data-
alebo pomocou
nasledujúcich javascriptových vlastností na dialógu môžeme meniť jeho
správanie. Objekt s týmito vlastnosťami môžeme odovzdať metóde
modal()
vyššie ako parameter.
backdrop
- Hodnotatrue
spôsobí prekrytie stránky polopriehľadným šedým pozadím. Hodnotastatic
navyše neumožnia dialóg zavrieť kliknutím na toto pozadie. S hodnotoufalse
sa táto prekrytie nezobrazí.keyboard
- Na základe hodnôttrue
alebofalse
dôjde, resp. nedôjde, k uzavretiu dialógu po stlačení klávesu esc.focus
- Presunie focus na dialóg po jeho otvorení, predvolená hodnota jetrue
.show
- Udáva, či sa má dialóg po inicializácii zobraziť. Predvolená hodnota jetrue
.
Metódy
Všetky metódy sú volané asynchrónne a odovzdávajú riadenie ešte predtým, než dôjde k dokončeniu animácie (transition). Ak zavoláme metódu na dialógu, ktorý práve prehráva transition, bude toto volanie metódy ignorované.
Metódu modal()
môžeme volať s nasledujúcimi
parametrami:
nastaveni
- Objekt s nastavenými vlastnosťami tak, ako sme si ich popísali vyššie. Voláme teda napr. Ako$('#dialog').modal({ keyboard: false })
."toggle"
- Otvorí / skryje dialóg a odovzdá riadenie skôr, ako dôjde k jeho skutočnému zobrazenie / skrytie."show"
- Otvorí dialóg a odovzdá riadenie skôr, ako dôjde k jeho skutočnému zobrazenie."hide"
- Zatvorí dialóg a odovzdá riadenie skôr, ako dôjde k jeho skutočnému zmiznutia."handleUpdate"
- Přepozicuje dialóg na základe jeho výšky. Voláme, ak sa jeho výška zmenila."dispose"
- Zničí dialóg.
show.bs.modal
- Vyvolá sa po otvorení dialógu, ale ešte pred jeho zobrazením, pretože stále môže prebiehať animácie. Ak bol dialóg otvorený pomocou tlačidla, nájdeme tento element vo vlastnostirelatedTarget
tejto udalosti.shown.bs.modal
- Vyvolá sa akonáhle je dialóg zobrazený, teda po dokončení jeho animácie. Ak bol dialóg otvorený pomocou tlačidla, nájdeme tento element vo vlastnostirelatedTarget
tejto udalosti.hide.bs.modal
- Vyvolá sa po uzavretí dialógu, ale ešte pred tým, než dialóg naozaj zmizne.hidden.bs.modal
- Vyvolá sa až potom, čo uzavretý dialóg prestane byť viditeľný.
Reakcia na udalosť môže vyzerať napr. Nasledovne:
$('#dialog').on('hidden.bs.modal', function (e) { // nějaká reakce na událost... })
V budúcej lekcii, Bootstrap - Popovers , sa budeme venovať komponentom Popovers.