23. diel - Bootstrap - Modálne dialógy

V minulej lekcii, Bootstrap - Paginácia, upozornenia a omrvinková navigácia, sme si prešli Bootstrap komponenty Pagination, Alerts a Breadcrumb.

V nasledujúcom tutoriáli CSS frameworku Bootstrap sa budeme venovať modálnym dialógom.

Hoci pop-upy, prekrývajúci obsah, sa na web úplne nehodia, občas sa mu nevyhneme. Ide napríklad o situáciu, kedy sa chceme používateľa opýtať, či si skutočne praje zavrieť záložku, pretože má rozrobenú prácu. Na to 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ú aj napríklad na otvorenie zväčšenej verzie obrázka alebo videa, aby sa zabránilo zbytočnému presmerovaniu na inú stránku. Známe sú tiež pod označením lightbox.

Modálne dialógy v Bootstrape

Modálne dialógy tvoríme pomocou JavaScriptu. Budeme k nim teda opäť potrebovať načítať Bootstrap JavaScript plugin.

Ako prvú ukážku na stránku vložíme tlačidlo, ktoré po stlačení vyvolá modálny dialóg:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#dialog">
    Open modal
</button>

<div class="modal fade" id="dialog" tabindex="-1" aria-labelledby="dialog-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="dialog-label">Title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <p>Text</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</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 data atribútu data-bs-toggle="modal". Pomocou atribútu data-bs-target uvedieme selektor na dialóg, ktorý má tlačidlo otvoriť. Výsledok v prehliadači:

Pop-ups in Bootstrap

popups.html

Pre dialóg najskôr vkladáme polopriehľadnú šedú vrstvu cez stránku ako element <div> s triedou .modal. Na dosiahnutie efektu animácie pridávame ešte triedu .fade, a ak by sme animáciu z nejakého dôvodu nechceli, tak triedu jednoducho nepridáme. Na vylúčenie vybrania vrstvy klávesom Tab uvádzame atribút tabindex="-1". A pre podporu hlasových čítačiek pridávame atribúty aria-labelledby="dialog-label" a aria-hidden="true". Samotný dialóg potom vkladáme ako ďalší <div> s triedou .modal-dialog. Ten rozdelíme na divy s triedami .modal-header, .modal-body a .modal-footer. Za povšimnutie stojí aj vloženie krížika na uzavretie 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žívajme dialógy na reklamné oznámenia, ktoré sa otvoria hneď po navštívení stránky, Google takéto weby penalizuje.

Pri zobrazení pop-upu sa na element <body> automaticky aplikuje trieda .modal-open, ktorá mu odstráni scrollbary. Nie je potrebné ju implementovať ručne. Môžeme tak scrollovať obsahom pop-upu, pokiaľ sa na stránku nezmestí, namiesto aby sme scrollovali celou stránkou. Bootstrap modal sa zavrie kliknutím mimo neho. V jednej chvíli môžeme zobraziť iba jeden takýto dialóg. Pretože sa modálne dialógy zobrazujú s fixnou pozíciou, mali by sme modálny obsah umiestniť nad obsah stránky, aby nedošlo k prekrytiu modálneho obsahu nejakou časťou 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út využiť, musíme namiesto neho siahnuť po JavaScripte:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.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 jednoducho pozmeniť ich obsah v závislosti od udalosti, pri akej boli otvorené. Môžeme teda používať jeden modálny dialóg na viac podobných účelov.

V ukážke nižšie vyplníme text do inputu v závislosti od stlačeného tlačidla:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#dialog" data-bs-whatever="funkce">Request a new feature</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#dialog" data-bs-whatever="bug">Report a bug</button>

<div class="modal fade" id="dialog" tabindex="-1" aria-labelledby="dialog-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="dialog-label">System Development</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="request-type" class="col-form-label">Request type</label>
                        <input type="text" class="form-control" id="request-type">
                    </div>
                    <div class="mb-3">
                        <label for="request-text" class="col-form-label">Text</label>
                        <textarea class="form-control" id="request-text"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Submit</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Na predvyplnenie dialógu využijeme JavaScript:

var MyModal = document.getElementById('dialog')
MyModal.addEventListener('show.bs.modal', function (event) {
  var button = event.relatedTarget   // Get the button which opened the modal
  var recipient = button.getAttribute('data-bs-whatever')   // Load information from its data attribute
  var modalBodyInput = MyModal.querySelector('.modal-body input') // Assign the value to the input
  modalBodyInput.value = recipient
})

V JavaScripte by sme samozrejme mohli upraviť akúkoľvek časť dialógu, načítať doň niečo AJAXom a podobne. Kľúčová je reakcia na udalosť show.bs.modal.

Výsledok v prehliadači:

Pop-ups in Bootstrap

popups_prefill.html

Výška dialógu

Dialóg sa vycentruje v závislosti od jeho výšky, ktorá sa vypočíta pri jeho zobrazení. Pre dynamickú zmenu obsahu a následnú aktualizáciu pozície modálneho okna použijeme metódu myModal.handleUpdate() na inštancii modálneho dialógu vytvoreného pomocou JavaScriptu:

var myModal = new bootstrap.Modal(document.getElementById('dialog'));
myModal.handleUpdate();

Veľkosti

Aj dialógy môžeme vyvolať v niekoľkých veľkostiach a to pridaním triedy elementu <div> s triedou .modal-dialog, teda druhému vnorenému divu:

.modal-sm - malý dialóg,
bez triedy pre predvolenú veľkosť,
.modal-lg - väčší dialóg,
.modal-xl - veľký dialóg.

JavaScript

Ako už bolo povedané, JavaScript bude pri modálnych dialógoch naším priateľom. Okrem vyvolania tlačidlami s data atribútom môžeme dialóg vyvolať pomocou JavaScriptu ako:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Tento prístup je alternatívou k použitiu data atribútov v HTML pre spúšťanie modálneho okna. To je užitočné v situáciách, kde potrebujeme viac kontroly nad správaním modálneho okna, než akú poskytujú štandardné data atribúty.

Vlastnosti dialógu

Pomocou data atribútov s prefixom data-bs- alebo pomocou nasledujúcich javascriptových vlastností na dialógu je možné meniť jeho správanie. Objekt s týmito vlastnosťami môžeme odovzdať konštruktoru vyššie ako parameter:

backdrop - Hodnota true spôsobí prekrytie stránky polopriehľadným šedým pozadím. Navyše, hodnota static neumožní zatvoriť dialóg kliknutím na toto pozadie. S hodnotou false sa táto prekrývajúca vrstva nezobrazí.
keyboard - Na základe hodnôt true alebo false dôjde, resp. nedôjde, k uzavretiu dialógu po stlačení klávesy Esc.
focus - Presunie focus na dialóg po jeho otvorení, predvolená hodnota je true.

Metódy dialógu

Všetky metódy sú volané asynchrónne a odovzdávajú riadenie ešte predtým, ako dôjde k dokončeniu animácie (transition). Ak zavoláme metódu na dialógu, ktorý práve prehráva transition, toto volanie metódy bude ignorované.

Objekt s nastavenými vlastnosťami tak, ako sme si ich popísali vyššie, voláme napríklad ako:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

Metódy na ovládanie dialógu sú tieto:

toggle() - Otvorí/skryje dialóg a odovzdá riadenie skôr, než dôjde k jeho skutočnému zobrazeniu/skrytiu.
show() - Otvorí dialóg a odovzdá riadenie skôr, než dôjde k jeho skutočnému zobrazeniu.
hide() - Zavrie dialóg a odovzdá riadenie skôr, než dôjde k jeho skutočnému zmiznutiu.
handleUpdate() - Prepoziciuje dialóg na základe jeho výšky. Voláme, pokiaľ sa jeho výška zmenila.
dispose() - Zničí dialóg.
getInstance() - Statická metóda, ktorá umožní získať modálnu inštanciu spojenú s prvkom DOM.
getOrCreateInstance() - Statická metóda, ktorá umožní získať modálnu inštanciu pridruženú k prvku DOM alebo vytvoriť novú v prípade, že nebola inicializovaná.

Udalosti

Všetky modálne udalosti sú spúšťané na samotný modal (tj. na <div class="modal">):

show.bs.modal - Vyvolá sa po otvorení dialógu, ale ešte pred jeho zobrazením, pretože stále môže prebiehať animácia. Pokiaľ 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. Pokiaľ 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, ako dialóg naozaj zmizne.
hidden.bs.modal - Vyvolá sa až potom, čo uzavretý dialóg prestane byť viditeľný.
hidePrevented.bs.modal - Udalosť sa spustí, keď je zobrazený dialóg a jeho pozadie je statické pri kliknutí mimo dialógu alebo pri stlačení klávesu Esc alebo nastavením data-bs-keyboard na false.

Reakcia na udalosť vyzerá napríklad takto:

const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
    // Some reaction to the event...
})

V ďalšej lekcii, Bootstrap - Popovers, sa budeme venovať komponentom Popovers.

Absolvované

Označiť lekciu ako neabsolvovanú

Pokračovať vo výuke
Bootstrap - Popovers

Ako sa ti páči článok?

Pred uložením hodnotenia, popíš prosím autorovi, čo je zleZnakov 0 z 50-500

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

50 hlasov

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity

Najčastejšie vyhľadávané