Jak Zrobić Wyskakujące Okienko W HTML

Spisu treści:

Jak Zrobić Wyskakujące Okienko W HTML
Jak Zrobić Wyskakujące Okienko W HTML

Wideo: Jak Zrobić Wyskakujące Okienko W HTML

Wideo: Jak Zrobić Wyskakujące Okienko W HTML
Wideo: JS - wyskakujące okienka i komentarze 2024, Może
Anonim

Tworzenie wyskakującego okienka w HTML odbywa się za pomocą biblioteki jQuery, która pozwala zintegrować obsługę zdarzeń ze stroną internetową, a tym samym umożliwia wyświetlanie aktywnej zawartości witryny.

Jak zrobić wyskakujące okienko w HTML
Jak zrobić wyskakujące okienko w HTML

Instrukcje

Krok 1

Otwórz stronę swojej witryny HTML w edytorze tekstu, którego używasz do napisania odpowiedniego kodu. Możesz także użyć standardowego narzędzia Windows Notepad, aby wstawić wyskakujące okienko. Aby to zrobić, kliknij prawym przyciskiem myszy plik HTML i wybierz „Otwórz za pomocą” - „Notatnik”.

Krok 2

W sekcji dokumentu utwórz warstwę, która obsłuży jQuery:

Krok 3

Następnie musisz ustawić nazwę wyskakującego okienka. Aby to zrobić, możesz użyć warstwowych nagłówków HTML:

Tytuł okna

Krok 4

Następnie ustaw tekst, który będzie wyświetlany w oknie za pomocą skryptu, aby utworzyć akapit:

Tekst

Krok 5

Następnie utwórz warstwę z klasą close_win, aby zamknąć wyskakujące okienko, przed zamknięciem poprzedniego uchwytu:

Zamknij okno

Krok 6

Dołącz bibliotekę jQuery do pliku, dodając wymagany znacznik między deskryptorami dokumentów. Na przykład:

Krok 7

Następnie wprowadź kod, aby wyświetlić wyskakujące okienko:

$ (funkcja () {

$ („# Pokaż”) Ukryj ();

Krok 8

Następnie musisz obsłużyć zdarzenie, w którym użytkownik nacisnął przycisk myszy, aby wywołać wyskakujące okienko i obsłużyć zamknięcie okna. W tym celu wprowadź następujący kod:

$ („# kliknij mnie”). Kliknij (funkcja () {$ („# pokaż”)). Fadein (300);})

$ („# Close_win”). Kliknij (funkcja () {$ („# pokaż”). Zanikanie (300);})

& lt / skrypt>})

Ten program obsługuje użytkownika naciskając przyciski do wywołania wyskakującego okna i klikając łącze, aby je zamknąć.

Krok 9

Aby wyświetlić wyskakujące okienko na stronie, możesz użyć linku klasy click-me, który został określony w powyższym kodzie. Aby to zrobić, wprowadź następujący kod w treści dokumentu:

Kliknij, aby wyświetlić wyskakujące okienko

Zalecana: