Popup okno ještě trochu jinak 1.

2. února 2003

•

Reklama či upoutávka ve vyskakujícím po-pup okně může být velmi nepříjemná až obtěžující. Pohříchu, mnozí šéfové a jiné odpovědné osoby rozhodující o vzhledu firemního webu pop-up okna tvrdošíjně vyžadují, nedbajíce na pohodlí svých návštěvníků. Jeden ze způsobů, jak s po-pup oknem seriozně naložit, najdete v tomto článku.

po-pup okno lze u modernějších prohlížečů nahradit dynamickým HTML, pomocí manipulace s kaskádovými styly můžete po obrazovce nechat skotačit reklamní upoutávky téměř dle libosti. Zde se ale zaměříme na „klasické“ po-pup okno, jak je známé z dřevních dob JavaScriptu, a pomocí hrstky jednoduchých funkcí jej poněkud zkulturníme. Konkrétně se bude jednat o tato vylepšení:

Okno je uživateli zobrazeno pouze jednou denně, takže například při reloadu titulní stránky již znovu nevyskakuje.
Uživatel má možnost zcela vypnout zobrazování po-pup okna.
Uživatel si může zvolit umístění po-pup okna v jednom ze čtyř rohů obrazovky (zde uvažujeme klasickou obdélníkovou obrazovku, pro šestiúhlé či oválné obrazovky by bylo třeba skript modifikovat).

Dále je do skriptu doplněna možnost jak vypnuté po-pup okno znovu zobrazit, pokud si je uživatel přeje opět shlédnout. Jak je vidět, vylepšení jsou to rozsahem malá, zato účinná. Podívejte se na ukázku takto upraveného okna (celé definované chování se projeví při reloadech výchozí šedé stránky).

Popis skriptu

Vyjma obrázků budeme potřebovat tři soubory:

Otevírací stránku (typicky se jedná o úvodní stránku webu).
Stránku se samotnou reklamou (ta se zobrazí v po-pup okně).
Soubor s javascripty (protože některé funkce a proměnné jsou sdílené, vyplatí se v tomto konkrétním případě „vytáhnout“ kód do externího .js souboru).

Otevírací stránka

Ve stránce, z níž se po-pup okno otevírá (jak již bylo řečeno, bývá to většinou titulní stránka webu), je potřeba provést tři úpravy. V hlavičce stránky vložime propojení na soubor s JavaScripty…

…dále modifikujeme element BODY voláním funkce, páchající otevření po-pup okna…

…a nakonec na vhodné místo stránky umístíme kód, který vypíše odkazy pro opětovné zobrazení po-pup okna v případě, že z nějakých důvodů nebylo zobrazeno:

if(MyCookie.Read(„newsdisabled“)==“yes“) {
    document.write(„Okno s novinkami je vypnuto. <a href=’javascript:void(0)‘ onClick=’EnableNewswin()‘>Zapnete je kliknutím zde</a>“);
} else {
    if(MyCookie.Read(„newstoday“)==“yes“) {
        document.write(„Okno s novinkami již dnes bylo zobrazeno. <a href=’javascript:void(0)‘ onClick=’OpenNewswin(true)‘>Znovu je zobrazíte kliknutím     zde</a>“);
    }
}

Z kódu je patrno i to, že data o aktuální pozici a stavu okna jsou uložena u klienta, v cookie.

Stránka s reklamou

Kromě vlastního reklamního textu, případně obrázků, obsahuje stránka propojení na javascriptový soubor newswin.js (stejně jako ta předchozí). Dále je opět modifikován element BODY, tentokrát při události onLoad voláme funkci zabezpečující změnu polohy okna dle uživatelem nastavené pozice:

Čtveřice šipek, sloužící pro změnu polohy okna, je zarámována do odkazů, v jejichž událostech onClick voláme polohovací funkci pro změnu pozice, přičemž volání se u čtyřech zmíněných odkazů liší jen parametrem:

onClick=“Position(‚lup‘)“
onClick=“Position(‚rup‘)“
onClick=“Position(‚ldn‘)“
onClick=“Position(‚rdn‘)“

A nakonec, odkaz „Nezobrazovat toto okno při příští návštěvě“ provádí při události onClick:

onClick=“DisableNewswin()“

Soubor s Javascripty

Předchozí stránky obsahovaly pouze volání funkcí, které jsou definovány v tomto souboru. Nejprve pomocný objekt pro manipulaci s cookies:

Následuje definice parametrů po-pup okna:

var iHeight = 450; // sirka okna
var iWidth = 200; // vyska okna
var iXoff=20; // offset zleva
var iX2off=20; // offset zprava
var iYoff=20; // -„- shora
var iY2off=80; // -„- zdola

Předchozí článek Dreamweaver a CSS

Další článek Tvoříte jedinečné weby? Přihlaste se do soutěže!