Vyskakovací okna pro nejrůznější účely mají při konstrukci webu mnoho využití. Lze je použít k vytváření různých druhů nabídek, umisťování reklamních textů a grafik, popisů nástrojů při vyplňování složitých formulářů a je vhodné umisťovat samotné formuláře do oken, která nezabírají místo na stránce. V našem článku najdete popis, jak si můžete takové okno vyrobit.
Je to nutné
Základní znalost HTML
Instrukce
Krok 1
vyskakovací okno, html, skrytá vrstva
Krok 2
Na mnoha stránkách na webu je vidět, že k vytváření vyskakovacích oken na stránkách se používají efektní knihovny různých rámců JavaScriptu (jQuery, MooTools, Prototype atd.). Ve skutečnosti však nejsou při řešení tohoto konkrétního problému nutné. K vytvoření vyskakovacích oken stačí nástroje dostupné v jazycích Hypertext Markup Language (HTML) a Cascading Style Sheets (CSS). Takto vytvořená okna budou fungovat bez ohledu na to, zda je v prohlížeči návštěvníka povolen JavaScript.
Veškerý kód, který vytváří vyskakovací okno, lze umístit na dva řádky. První řádek vytvoří odkaz, na který je třeba kliknout, aby se zobrazilo vyskakovací okno:
Klikněte zde!
Atribut onmouseover tagu odkazu nastavuje výchozí typ kurzoru myši pro odkazy. Atribut onclick určuje, že po kliknutí na odkaz by měl být skrytý blok PopUp viditelný.
Druhý řádek je ve skutečnosti vyskakovací okno. Vrstva s identifikátorem PopUp a velikostí okna, barvou a velikostí textu, pozadím a ohraničením uvedeným v atributu style:
Toto je text ve vyskakovacím okně
Ve výchozím nastavení není viditelný - je to indikováno voličem zobrazení s hodnotou žádný v popisu stylu vrstvy.
Ve skutečnosti je to vše, co potřebujete k vytvoření vyskakovacího okna - umístěte tyto dva řádky mezi značky a svou stránku a je to připraveno.
Krok 3
Abyste mohli zavřít vyskakovací okno před značkou, musíte přidat odkaz, který provede opačnou akci - skrytí viditelné vrstvy s identifikátorem PopUp:
zavřít
Krok 4
A pokud chcete, aby se okno neobjevilo kliknutím, ale umístěním kurzoru myši, musí být první řádek s odkazem upraven tímto způsobem:
přesuňte myš sem!
Krok 5
Nyní jste obeznámeni s principem a strukturou kódu vyskakovacího okna a design jeho vzhledu a obsahu zcela závisí na vašich cílech a představivosti.
