Utwórz wyskakujące okienko za pomocą HTML, CSS i JavaScript

Dobrze zaprojektowane wyskakujące okienka sprawiają, że Twoja strona internetowa jest bardziej interaktywna i nowoczesna. Mogą tworzyć rynki i zwiększać sprzedaż dla firm.

Możesz tworzyć wyskakujące okienka za pomocą HTML, CSS i JavaScript. Skorzystaj z poniższego przewodnika, aby utworzyć i nadać styl wyskakującemu okienku od podstaw. Sprawia, że ​​Twoja witryna jest interaktywna i zapewnia doskonałe wrażenia użytkownika.

Napisz HTML, aby ustrukturyzować treść

Napiszmy kod HTML, który ma ukryte okno modalne, które pojawia się po kliknięciu przycisku. W takim przypadku wyświetlisz znaczenie tego słowa Cześć! Wyskakujące okienko będzie miało nagłówek i trochę treści.

Natychmiast po uruchomieniu okna modalnego na tło nakładany jest efekt rozmycia. Dodaj klasy do sekcji, których użyjesz do późniejszego wybrania modalu w JavaScript.

<ciało>
<przyciskklasa=„otwarty modalny”>Cześć!przycisk>
<dzklasa=„modalna treść ukryta-modalna”>
<dzklasa=„modalny nagłówek”>
<h3>Znaczenie Cześć!h3>
<przyciskklasa=„zamknięty modalny”>×przycisk>
dz>
<dzklasa=„ciało modalne”>
<P>Hello to powitanie w języku angielskim. Stosowany jest o godz
 początek zdania jako wprowadzenie, osobiście lub
 na telefonie.P>
dz>
dz>
<dzklasa=„rozmycie-bg ukryte rozmycie”>dz>
<scenariuszźródło=„skrypt.js”>scenariusz>
ciało>

Strona powinna wyglądać tak:

Możesz także chcieć zbadać Element okna dialogowego HTML jeśli chcesz użyć najbardziej semantycznego znacznika.

Napisz CSS, aby dodać styl

Użyj CSS, aby sformatować wyskakujące okienko. Umieść okno na środku strony internetowej na czarnym tle, aby było dobrze widoczne. Wystylizujesz również okno, jego tło i rozmiar czcionki.

Najpierw utwórz jednolity styl dla całej strony, ustawiając margines, dopełnienie i wysokość linii. Następnie wyrównaj elementy ciała pośrodku na tylnym tle.

* {
margines: 0;
wyściółka: 0;
rozmiar pudełka: ramka;
Wysokość linii: 1;
}
ciało {
wysokość: 100%;
wyświetlacz: przewód;
uzasadnij treść: Centrum;
kierunek zginania: kolumna;
wyrównaj elementy: Centrum;
tło: #000;
luka: 30piks;
}

Następnie stylizuj otwarty modalny przycisk. Nadaj mu inny kolor tła niż reszta strony, aby się wyróżniał. Ustaw także kolor czcionki, rozmiar, wypełnienie i czas przejścia.

.otwarty modalny {
tło: #20c997;
kolor: #ffff;
granica: nic;
wyściółka: 20piks 40piks;
rozmiar czcionki: 48piks;
promień granicy: 100piks;
kursor: wskaźnik;
przemiana: Wszystko 00,3s;
zarys: nic;
}
.otwarty modalny:aktywny {
przekształcać: przetłumacz Y(-17px);
}

Następnie określ styl treści modalnej, która będzie wyświetlana po otwarciu okna. Ustaw białe tło, nadaj mu mniejszą szerokość niż korpus i dodaj dopełnienie.

Nadaj mu również indeks Z, aby pojawił się przed otwarty modalny przycisk. Dodatkowo ustaw tzw ukryty modalny wyświetla się jako brak, więc pozostaje ukryty, dopóki go nie uruchomisz.

zawartość modalna {
tło: #ccc;
szerokość: 500piks;
wyściółka: 20piks;
promień granicy: 10piks;
indeks z: 99;
}
.modalny nagłówek {
wyświetlacz: przewód;
uzasadnij treść: przestrzeń pomiędzy;
margines-dolny: 16piks;
kolor: #000;
rozmiar czcionki: 30piks;
}
ciało modalneP { 
rozmiar czcionki: 22piks;
Wysokość linii: 1.5; 
} 
.ukryty-modalny { 
wyświetlacz: nic; 
}

Następnie stylizuj zamknięty modalny przycisk z przezroczystym tłem i wyrównaj go do środka.

.zamknięty modalny {
tło: przezroczysty;
granica: nic;
wyświetlacz: przewód;
wyrównaj elementy: Centrum;
uzasadnij treść: Centrum;
wysokość: 20piks;
szerokość: 20piks;
rozmiar czcionki: 40piks;
}
.zamknięty modalny:unosić się {
kolor: #fa5252;
}

Na koniec nadaj styl elementowi rozmycia, który będzie rzucany na tło po otwarciu okna. Będzie miał maksymalną wysokość i szerokość oraz filtr tła. Ustaw rozmycie na brak, aby nie było widoczne, dopóki okno się nie otworzy.

.blur-bg {
pozycja: absolutny;
szczyt: 0;
lewy: 0;
wysokość: 100%;
szerokość: 100%;
tło: rgba(0, 0, 0, 0.3);
filtr tła: plama(5piks);
}
.ukryte rozmycie {
wyświetlacz: nic;
}

Po dodaniu w CSS strona powinna wyglądać tak:

Kontroluj wyskakujące okienko za pomocą kodu JavaScript

Będziesz używać JavaScript do otwierania i zamykania okna modalnego, pokazując je lub ukrywając. Dodać słuchacze zdarzeń do przycisku, aby wywołać otwieranie i zamykanie po kliknięciu.

Najpierw wybierz odpowiednie elementy, korzystając z klas CSS zdefiniowanych w kodzie HTML:

pozwalać zawartość modalna = dokument.querySelector(„.modalna zawartość”);
pozwalać otwartyModalny = dokument.querySelector(„.otwarty-modalny”);
pozwalać zamknijModalny = dokument.querySelector(„.zamknij-modalny”);
pozwalać rozmycieBg = dokument.querySelector(".blur-bg");

Dodaj detektor zdarzeń do pliku otwarty modalny przycisk, aby otwierał okno po kliknięciu.

openModal.addEventListener("Kliknij", funkcjonować () {
 modalContent.classList.remove(„ukryty-modalny”);
 blurBg.classList.remove(„ukryte rozmycie”);
});

Wykonaj przeciwne czynności, aby obsłużyć zamykanie wyskakującego okienka, ale tym razem zawiń je w nazwaną funkcję. To obsłuży zachowanie wielu zdarzeń, które mogą spowodować zamknięcie okna modalnego:

pozwalać closeModalFunction = funkcjonować () {
 modalContent.classList.add(„ukryty-modalny”)
 blurBg.classList.add(„ukryte rozmycie”)
}

Dodaj detektory zdarzeń do obsługi kliknięć przycisku tła lub przycisku zamykania oraz przypadków, w których użytkownik naciśnie klawisz Escape.

blurBg.addEventListener("Kliknij", zamknij funkcję modalną);
closeModal.addEventListener("Kliknij", zamknij funkcję modalną);
dokument.addEventListener(„klawisz”, funkcjonować (wydarzenie) {
Jeśli (zdarzenie.klucz "Ucieczka"
 && !modalContent.classList.contains("ukryty")
 ) {
 closeModalFunction();
 }
});

Teraz, kiedy klikniesz na Cześć! przycisk, pojawi się okno modalne. Możesz je zamknąć, klikając przycisk anulowania po prawej stronie okna. Zobacz kod na codepen.io i wejdź w interakcję z modą:

Zastosowania okien wyskakujących

Głównym zastosowaniem okien wyskakujących/modalnych w tworzeniu stron internetowych jest skupienie się na konkretnym elemencie na stronie internetowej. Po uruchomieniu dezaktywuje resztę strony, zachęcając użytkownika do zwrócenia na nią uwagi.

Okna wyskakujące animują interfejs użytkownika. Mogą ostrzegać i zwracać uwagę użytkowników na ważne informacje na stronie. Aby usunąć okno, użytkownik musi wykonać jakąś akcję. W ten sposób użytkownik wchodzi w interakcję z oknem i uzyskuje zamierzone informacje.