Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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">&times;</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:

Pop-upy v Bootstrap
popupy.html

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">&times;</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:

Pop-upy v Bootstrap
popupy_predvy­plneni.html

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 - Hodnota true spôsobí prekrytie stránky polopriehľadným šedým pozadím. Hodnota static navyše neumožnia dialóg zavrieť kliknutím na toto pozadie. S hodnotou false sa táto prekrytie nezobrazí.
  • keyboard - Na základe hodnôt true alebo false 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 je true.
  • show - Udáva, či sa má dialóg po inicializácii zobraziť. Predvolená hodnota je true.

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.
Udalosti
  • 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 vlastnosti relatedTarget 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 vlastnosti relatedTarget 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.


 

Predchádzajúci článok
Bootstrap - Paginace, Upozornenie a Drobečková navigácie
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Preskočiť článok
(neodporúčame)
Bootstrap - Popovers
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity