Vyskakovacie okná na najrôznejšie účely majú pri stavbe webu mnoho využití. Môžu byť použité na vytvorenie rôznych druhov ponúk, umiestňovanie reklamných textov a grafík, popisov nástrojov pri vypĺňaní zložitých formulárov a je vhodné umiestňovať samotné formuláre do okien, ktoré nezaberajú miesto na stránke. V našom článku nájdete popis, ako si môžete také okno vyrobiť.
Je to nevyhnutné
Základné znalosti HTML
Inštrukcie
Krok 1
vyskakovacie okno, html, skrytá vrstva
Krok 2
Na mnohých stránkach na webe je vidieť, že na vytváranie kontextových okien na stránkach sa používajú efektné knižnice rôznych rámcov JavaScriptu (jQuery, MooTools, Prototype atď.). V skutočnosti však nie sú potrebné pri riešení tohto konkrétneho problému. Na vytvorenie kontextových okien sú postačujúce nástroje dostupné v jazykoch Hypertext Markup Language (HTML) a Cascading Style Sheets (CSS). Takto vytvorené okná budú fungovať bez ohľadu na to, či je v prehliadači návštevníka povolený JavaScript.
Celý kód, ktorý vytvára kontextové okno, je možné umiestniť na dva riadky. Prvý riadok vytvára odkaz, na ktorý je potrebné kliknúť, aby sa zobrazilo vyskakovacie okno:
Kliknite tu!
Atribút onmouseover značky odkazu tu nastavuje predvolený typ kurzora myši pre odkazy. Atribút onclick určuje, že po kliknutí na odkaz by mal byť skrytý blok PopUp viditeľný.
Druhý riadok je v skutočnosti vyskakovacie okno. Vrstva s identifikátorom PopUp a veľkosť okna, farba a veľkosť textu, pozadie a orámovanie uvedené v atribúte style:
Toto je text vo vyskakovacom okne
Predvolene nie je viditeľný - indikuje to selektor displeja s hodnotou žiadny v popise štýlu vrstvy.
To je vlastne všetko, čo potrebujete na vytvorenie vyskakovacieho okna - umiestnite tieto dva riadky medzi značky a svoju stránku a je pripravená.
Krok 3
Aby bolo možné zavrieť vyskakovacie okno pred značkou, musíte pridať odkaz, ktorý vykoná opačnú akciu - skryje viditeľnú vrstvu s identifikátorom PopUp:
Zavrieť
Krok 4
A ak chcete, aby sa okno nezobrazovalo kliknutím, ale umiestnením kurzora myši, musí sa prvý riadok s odkazom upraviť takto:
pohni myšou sem!
Krok 5
Teraz ste už oboznámení s princípom a štruktúrou kódu vyskakovacieho okna a dizajn jeho vzhľadu a obsahu úplne závisí od vašich cieľov a predstavivosti.
