Tvorba vlastních dialogových oken

22. prosince 1999

•

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

window.showModalDialog(URL[, argumenty] [, vlastnosti])

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

<input type=“button“ value=“Ukázka“ onClick=“showDialog();“> <script language=“JavaScript“>
<!–
function showDialog() {
browser=navigator.appName;
verze = parseInt(navigator.appVersion);
if (browser==“Microsoft Internet Explorer“ & verze >=4){
self.showModalDialog (‚dialog_okno.htm‘, null, ‚status:no; center:yes; help:no; minimize:no;
maximize:no;border:thin; dialogWidth:300px;dialogHeight:225px‘);
};
}
// –>
</script>

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.

<html>
<head>
<title>Tipy pro čtenáře</title>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
</head>
<body bgcolor=“#88bbFF“>
<font face=“ArialCE, HelveticaCE, Arial, Helvetica, sans-serif“ size=“2″>
<img src=“http://www.interval.cz/images/ikona.gif“ width=“88″ height=“31″ name=“ikona“ align=“right“>
<p align=“justify“><b>Víte, že</b> pokud máte jakýkoli nápad, který by pomohl vylepšit server Interval.cz, můžete nám bez okolků poslat email?<br>
<b>Víte, že</b>ke každému článku můžete online připojit svůj názor? <br>
<b>Víte, že</b> server Interval provozuje emailovou konferenci o HTML a věcech s ním souvisejících? </p>
<p align=“center“>
<input type=“button“ value=“Pokračovat“ onClick=“window.close();“>
</p>
</font>
</body>
</html>

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:

window.open(‚dialog_okno.htm‘, ‚dialog‘, ‚width=300,height=225, z-lock=yes‘)

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.

Předchozí článek Teleport Pro = download stránek

Další článek Tipy - triky při tvorbě HTML stránek 1.