Tvorba vlastních dialogových oken
Určitě víte, že JavaScript umožňuje zobrazovat ve webových stránkách dialogová okna, pomocí kterých lze návštěvníky upozorňovat na důležité informace (metodou window.alert), nebo naopak vyžádat si údaje od návštěvníka (window.prompt), či jejich potvrzení (window.confirm).
Méně známou možností je vytváření dialogových oken, jejichž vzhled můžete přizpůsobit designu stránek nebo své fantazii. Návod na tvorbu takových dialogových oken Vám přinášíme v tomto článku.
Vzhledově vlastní dialogová okna můžeme zobrazovat pomocí metody showModalDialog() objektu window. Tato metoda je však podporována až od čtvrté verze Internet Exploreru. Netscape Navigator tento příkaz nezná, takže je nutné pro něj najít náhradní řešení, kterému se budeme věnovat na konci tohoto článku. Syntaxe příkazu showModalDialog() vypadá následovně:
|
Nyní si vysvětlíme jednotlivé části příkazu:
URL – jedná se o adresu webové stránky, která bude zobrazena v dialogovém okně
argumenty – nepovinná část, tímto způsobem předáme vstupní hodnoty proměnných, které mohou být v rámci skriptů (klientských nebo serverových) dále zpracovány.
vlastnosti – nepovinné parametry, pomocí kterých nastavíme vzhled dialogového okna. Můžeme využít následujích možností:
- dialogWidth, dialogHeight – šířka a výška dialogového okna (v pixelech)
- dialogLeft, dialogTop – pozice levého horního rohu dialogového okna (v pixelech)
- center – automatické zobrazování dialogu ve středu okna prohlížeče (yes/no)
- help, minimize, maximize – určuje, zdali budou zobrazeny tlačítka „?“, minimalizace, maximalizace okna v titulním řádku okna (hodnoty yes/no).
- font, font-family, font-size, font-weight, font-style, font-variant – vlastnosti písma použitého v dialogovém okně. Nastavení písma odpovídá specifikaci CSS.
- border – nastavení tlouštky rámu dialogového okna (hodnoty thin/thick).
- status – určuje, zdali bude zobrazen stavový řádek okna (yes/no)
Využití metody showModalDialog() si ukážeme na malé ukázce. Okno se chová jako obdobné standartní okno (např. window.alert): pokračovat v práci s původním dokumentem můžete až po jeho uzavření. Zdrojový kód, který vede k zobrazení zprávy je následující:
|
Protože metoda showModalDialog() je podporována až od čtvrté verze MSIE je provedena nejprve kontrola prohlížeče a až poté je okno zobrazeno. V jiných prohlížečích bude tento skript ignorován. Po kliknutí na odkaz bude zobrazeno okno, které bude obsahovat soubor dialog_okno.htm. Jedná se o standartní HTML soubor, pro úplnost si uvedeme zdrojový kód i této stránky.
|
Dialogové okno uzavřeme též pomocí JavaScriptu, přesněji metodou window.close(), kterou zavoláme po kliknutí na tlačítko „Pokračovat“.
A co Netscape Navigator?
Netscape Navigator bohužel metodu showModalDialog() nepodporuje, takže pro něj je nutno najít náhradní řešení. Tím může být v našem jednoduchém případě zobrazení standartního dialogového okna (metodou alert()). Další alternativou je metoda window.open se specifickým nastaveným parametrem z-lock např. v tomto tvaru:
|
Parametr z-lock způsobí, že nově otevřené okno se bude chovat jako dialogové. Tento skript však nebude za normálních okolností fungovat, protože parametr z-lock je možné spustit pouze v tzv. signed skriptech (certifikované skripty), jejichž použití je relativně složité. Více o tomto problému se dozvíte např. zde.
Závěrem
Takto vytvořená dialogová okna lze samozřejmě možné využívat nejen k pouhému zobrazování zpráv, ale i k složitějším operacím, např. ke zpracování formulářů. Nezapomeňte však, že na rozdíl od standartních dialogových oken jsou tyto načítány z Web serverů. Dialogová okna budou po celou dobu načítání blokovat prohlížeč, takže zobrazování velkých souborů návštěvníka pravděpodobně odradí od další návštěvy Vašich stránek.
Mohlo by vás také zajímat
-
Gaming na HDR monitoru: Stojí to za to?
12. srpna 2024 -
Jak si vyzkoušet Apple Intelligence v EU
2. srpna 2024 -
Jak zabezpečit váš chytrý telefon před kybernetickými hrozbami
30. listopadu 2023
Nejnovější
-
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024