Lekce 23 - Bootstrap - Modální dialogy

V minulé lekci, Bootstrap - Paginace, Upozornění a Drobečková navigace, jsme pokračovali v přehlídce Bootstrap komponent.

Dnešní tutoriál populárního CSS frameworku bude o modálních dialozích.

Ačkoli pop-upy, překryvný obsah, se na web úplně nehodí, občas se mu nevyhneme. Jedná se např. o situaci, kdy se chceme uživatele zeptat, zda si skutečně přeje zavřít záložku, protože má rozdělanou práci. K tomuto účelu bychom sice mohli použít nativní JavaScriptové dialogy (confirm(), prompt(), alert()), ale ty většinou nevypadají zrovna nejlépe a nelze je přizpůsobovat. Pop-upy se často používají také např. k otevření zvětšeniny obrázku nebo videa, aby se zabránilo zbytečnému přesměrování na jinou stránku. Možná je tak znáte pod označením lightbox.

Modální dialogy v Bootstrapu

Modální dialogy tvoříme pomocí JavaScriptu, budeme k nim tedy opět potřebovat načíst Bootstrap JavaScript plugin.

Ukázka

Jako první ukázku do stránky vložíme tlačítko, které po stisknutí vyvolá modální dialog.

<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>

Dialogy budeme na rozdíl od naprosté většiny komponent spouštět v praxi spíše JavaScriptem. V ukázce výše je dialog otevřený pomocí elementu <button> a data atributem data-toggle="modal". Pomocí atributu data-target uvedeme selektor na dialog, který má tlačítko otevřít. Výsledek v prohlížeči:

Pop-upy v Bootstrap

popupy.html

Pro dialog nejprve vkládáme poloprůhlednou šedou vrstvu přes stránku jako element <div> se třídou .modal. K dosažení efektu animace přidáváme ještě třídu .fade, pokud bychom animaci z nějakého důvodu nechtěli, tak třídu jednoduše nepřidáme. K vyloučení vybrání vrstvy klávesou tab uvádíme atribut tabindex="-1". A konečně k dosažení podpory hlasových čteček přidáváme atributy role="dialog", aria-labelledby="dialog-label" a aria-hidden="true". Samotný dialog poté vkládáme jako další <div> se třídou .modal-dialog. Ten rozdělíme na divy se třídami .modal-header, .modal-body a .modal-footer. Za povšimnutí stojí ještě vložení křížku k uzavření dialogu v jeho hlavičce.

Do dialogu můžeme vložit libovolný HTML obsah včetně formulářů. Ovšem pozor, nepoužívejte dialogy na reklamní sdělení, která se otevřou hned po navštívení stránky, Google takové weby penalizuje.

Při zobrazení pop-upu se na element <body> aplikuje třída .modal-open, která mu odstraní scrollbary. Můžeme tak scrollovat obsahem pop-upu, pokud se na stránku nevejde, místo abychom rolovali stránkou. Bootstrap modal se zavře kliknutím mimo něj. V jednu chvíli můžeme zobrazit pouze jeden takový dialog. Protože se modální dialogy zobrazují s fixní pozicí, měli bychom modální obsah umístit nad obsah stránky, aby nedošlo k překrytí modálního obsahu nějakou částí obsahu na stránce. V modálních dialozích nebude fungovat atribut autofocus. Pokud bychom do dialogu umístili formulář a chtěli atributu využít, musíme místo něj sáhnout po JavaScriptu:

$('#dialog').on('shown.bs.modal', function () {
    $('#formular-jmeno').trigger('focus');
});

Jak již bylo řečeno, do dialogů můžeme vložit prakticky cokoli včetně popovers nebo gridu, viz dále v kurzu.

Předvyplnění obsahu

Modální dialogy můžeme předvyplnit nebo i lehce pozměnit jejich obsah v závislosti na události, při jaké byly otevřené. Můžeme tedy používat jeden modální dialog pro více podobných účelů.

V ukázce níže vyplníme text do inputu v závislosti na stisknutém tlačítku:

<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 předvyplnění dialogu 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 bychom samozřejmě mohli upravit jakoukoli část dialogu, načíst do něj něco AJAXem a podobně. Klíčová je reakce na událost show.bs.modal.

Výsledek v prohlížeči:

Pop-upy v Bootstrap

popupy_predvyplneni.html

Výška dialogu

Dialog se vycentruje v závislosti na jeho výšce, která se vypočítá při jeho zobrazení. Pokud bychom nějak dynamicky měnili jeho obsah, je možné nechat jej přepozicovat zavoláním $('#dialog').data('bs.modal').handleUpdate(); nebo $('#dialog').modal('handleUpdate');.

Velikosti

I dialogy můžeme vyvolat v několika velikostech a to přidáním třídy elementu <div> se třídou .modal-dialog, tedy druhému vnořenému divu.

.modal-lg - Velký dialog
Bez třídy pro výchozí velikost
.modal-sm - Malý dialog

JavaScript

Jak již bylo řečeno, JavaScript bude u modálních dialogů vaším přítelem. Kromě vyvolání tlačítky s data atributem můžeme dialog vyvolat pomocí JavaScriptu jako:

$('#dialog').modal();

Vlastnosti

Pomocí data atributů s prefixem data- nebo pomocí následujících javascriptových vlastností na dialogu můžeme měnit jeho chování. Objekt s těmito vlastnostmi můžeme předat metodě modal() výše jako parametr.

backdrop - Hodnota true způsobí překrytí stránky poloprůhledným šedým pozadím. Hodnota static navíc neumožní dialog zavřít kliknutím na toto pozadí. S hodnotou false se tato překryvná vrstva nezobrazí.
keyboard - Na základě hodnot true nebo false dojde, resp. nedojde, k uzavření dialogu po stisknutí klávesy esc.
focus - Přesune focus na dialog po jeho otevření, výchozí hodnota je true.
show - Udává, zda se má dialog po inicializaci zobrazit. Výchozí hodnota je true.

Metody

Všechny metody jsou volané asynchronně a předávají řízení ještě předtím, než dojde k dokončení animace (transition). Pokud zavoláme metodu na dialogu, který právě přehrává transition, bude toto volání metody ignorováno.

Metodu modal() můžeme volat s následujícími parametry:

nastaveni - Objekt s nastavenými vlastnostmi tak, jak jsme si je popsali výše. Voláme tedy např. jako $('#dialog').modal({ keyboard: false }).
"toggle" - Otevře/skryje dialog a předá řízení dříve, než dojde k jeho skutečnému zobrazení/skrytí.
"show" - Otevře dialog a předá řízení dříve, než dojde k jeho skutečnému zobrazení.
"hide" - Zavře dialog a předá řízení dříve, než dojde k jeho skutečnému zmizení.
"handleUpdate" - Přepozicuje dialog na základě jeho výšky. Voláme, pokud se jeho výška změnila.
"dispose" - Zničí dialog.

Události

show.bs.modal - Vyvolá se po otevření dialogu, ale ještě před jeho zobrazením, protože stále může probíhat animace. Pokud byl dialog otevřen pomocí tlačítka, nalezneme tento element ve vlastnosti relatedTarget této události.
shown.bs.modal - Vyvolá se jakmile je dialog zobrazený, tedy po dokončení jeho animace. Pokud byl dialog otevřen pomocí tlačítka, nalezneme tento element ve vlastnosti relatedTarget této události.
hide.bs.modal - Vyvolá se po uzavření dialogu, ale ještě před tím, než dialog opravdu zmizí.
hidden.bs.modal - Vyvolá se až poté, co uzavřený dialog přestane být viditelný.

Reakce na událost může vypadat např. takto:

$('#dialog').on('hidden.bs.modal', function (e) {
    // nějaká reakce na událost...
})

V příští lekci, Bootstrap - Popovers, se budeme věnovat komponentám Popovers.

Článek pro vás napsal David Čápka Hartinger

Uživatelské hodnocení:

326 hlasů

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

David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.

Aktivity