Okna wyskakujące do różnych celów mają wiele zastosowań w tworzeniu stron internetowych. Mogą służyć do tworzenia różnego rodzaju menu, umieszczania tekstów i grafik reklamowych, podpowiedzi przy wypełnianiu skomplikowanych formularzy, a same formularze wygodnie umieszczać w oknach, które nie zajmują miejsca na stronie. W naszym artykule znajdziesz opis, jak możesz wykonać takie okno.
Czy to jest to konieczne
Podstawowa znajomość HTML
Instrukcje
Krok 1
popup, html, ukryta warstwa
Krok 2
Na wielu stronach w sieci można zauważyć, że do tworzenia wyskakujących okienek na stronach używane są fantazyjne biblioteki różnych frameworków JavaScript (jQuery, MooTools, Prototype, itp.). Jednak w rzeczywistości nie są one konieczne przy rozwiązywaniu tego konkretnego problemu. Narzędzia dostępne w Hypertext Markup Language (HTML) i Cascading Style Sheets (CSS) są wystarczające do tworzenia wyskakujących okienek. Utworzone w ten sposób okna będą działać niezależnie od tego, czy w przeglądarce odwiedzającego jest włączona obsługa JavaScript.
Cały kod tworzący wyskakujące okienko można umieścić w dwóch wierszach. Pierwsza linia tworzy link, który należy kliknąć, aby wyświetlić wyskakujące okienko:
Kliknij tutaj!
W tym przypadku atrybut onmouseover znacznika link ustawia domyślny typ kursora myszy dla linków. Atrybut onclick określa, że po kliknięciu łącza ukryty blok PopUp powinien stać się widoczny.
Drugi wiersz to w rzeczywistości wyskakujące okienko. Warstwa z identyfikatorem PopUp oraz rozmiarem okna, kolorem i rozmiarem tekstu, tła i obramowania określonymi w atrybucie style:
To jest tekst w wyskakującym okienku
Domyślnie nie jest widoczny - jest to wskazywane przez selektor wyświetlania z wartością none w opisie stylu warstwy.
Właściwie to wszystko, czego potrzebujesz, aby utworzyć wyskakujące okienko - umieść te dwie linie między tagami a stroną i gotowe.
Krok 3
Aby móc zamknąć wyskakujące okienko przed tagiem, należy dodać link wykonujący odwrotną akcję - ukrywanie widocznej warstwy z identyfikatorem PopUp:
blisko
Krok 4
A jeśli chcesz, aby okno wyskakiwało nie przez kliknięcie, ale przez najechanie kursorem myszy, to pierwsza linia z linkiem musi zostać zmodyfikowana w ten sposób:
przesuń mysz tutaj!
Krok 5
Znasz już zasadę i strukturę kodu wyskakującego okienka, a projekt jego wyglądu i zawartości całkowicie zależy od Twoich celów i wyobraźni.
