Czy kiedykolwiek chciałeś, aby coś na Twojej stronie przyciągnęło uwagę odwiedzających? Wyskakujące okienka pop-up mogą być świetnym sposobem na zrobienie tego! W tym artykule omówimy, jak zbudować takie okienko od podstaw, krok po kroku. Nawet jeśli nie masz doświadczenia w programowaniu, z łatwością stworzysz własny porsty pop-up!
Jaki Jest Cel?
Zanim zaczniesz tworzyć pop-up, zastanów się, jaki cel ma on spełnić. Czy chcesz, aby użytkownicy zapisywali się do newslettera, czy może chcesz pokazać im promocję? Określenie celu pomoże Ci dostosować treść i wygląd pop-upa do swoich potrzeb.
Zamieszczenie na stronie
Oto przykładowa struktura strony HTML, w której umieszczamy nasze wyskakujące okno w tagu <body>.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nazwa strony</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Tutaj dodajemy zawartość naszego pop-upa -->
<script src="script.js"></script>
</body>
</html>W miejscu <!-- Tutaj dodajemy zawartość naszego pop-upa --> umieść kod pop-upa, który chcesz wyświetlić na swojej stronie. Na przykład:
<div id="popup" class="popup">
<div class="popup-content">
<h2>Witaj na Naszej Stronie!</h2>
<p>Zapisz się do naszego newslettera, aby otrzymywać najnowsze informacje i promocje!</p>
<button id="close-popup">Zamknij</button>
</div>
</div>Styl CSS Naszego Wyskakującego Okna
Ten fragment kodu CSS definiuje stylizację dla wyskakującego okna (pop-upa). Należy go umieścić w napisz pliku CSS który odpowiada za wygląd strony.
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.popup-content {
text-align: center;
}
#close-popup {
background-color: #ff0000;
color: #ffffff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}Wyjaśnienie Kodu CSS
Klasa .popup
display: none;: Ta właściwość ukrywa początkowo pop-up, dzięki czemu nie jest on widoczny na stronie. Po zastosowaniu odpowiedniego kodu JavaScript możemy zmienić tę wartość nablock, aby pop-up się wyświetlił.position: fixed;: Ustawia pozycję pop-upa jako stałą, co oznacza, że jego położenie będzie niezmienne nawet po przewijaniu strony.top: 50%; left: 50%;: Te właściwości ustawiają pop-up na środku ekranu, przy wykorzystaniu punktu referencyjnego znajdującego się w połowie jego wysokości i szerokości.transform: translate(-50%, -50%);: Ta transformacja przesuwa pop-up o 50% jego własnej szerokości i wysokości w lewo i w górę, co skutkuje jego umiejscowieniem dokładnie na środku ekranu.background-color: #ffffff;: Określa kolor tła pop-upa, w tym przypadku jest to biały.padding: 20px;: Dodaje wewnętrzne odstępy wokół zawartości pop-upa, co poprawia jego czytelność i estetykę.border-radius: 10px;: Zaokrągla rogi pop-upa, nadając mu bardziej zaokrąglony wygląd.box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);: Dodaje cień wokół pop-upa, aby wyróżnić go na tle strony. Wartośćrgba(0, 0, 0, 0.5)określa kolor cienia (czarny) i jego przezroczystość.z-index: 9999;: Określa wartość warstwy pop-upa w stosunku do innych elementów strony. Im wyższa wartośćz-index, tym pop-up będzie wyświetlany na wierzchu innych elementów. W tym przypadku wartość jest bardzo wysoka, aby zapewnić, że pop-up będzie zawsze na wierzchu.
Klasa .popup-content
Właściwość text-align: center; ustawia poziome wyjustowanie tekstu wewnątrz elementu na środku. Oznacza to, że wszelki tekst oraz inne elementy wewnątrz danego kontenera będą wyśrodkowane w poziomie.
Klasa .popup-content
background-color: #ff0000;: Określa kolor tła przycisku. W tym przypadku jest to intensywna czerwień (o kodzie koloru #ff0000).color: #ffffff;: Ustala kolor tekstu przycisku. Tutaj jest to biały (#ffffff), co zapewni kontrast z tłem czerwonym.border: none;: Usuwa obramowanie przycisku. Dzięki temu przycisk będzie pozbawiony widocznej granicy.padding: 10px 20px;: Dodaje wewnętrzne odstępy do przycisku. Pierwsza wartość (10px) to odstęp na górze i na dole, a druga wartość (20px) to odstęp po lewej i prawej stronie przycisku.border-radius: 5px;: Zaokrągla rogi przycisku. Wartość 5px określa promień zaokrąglenia rogów.cursor: pointer;: Zmienia kształt kursora, gdy najedziemy na przycisk. W tym przypadku kursor przyjmie kształt wskaźnika, co sugeruje, że przycisk jest klikalny.
Dodanie Funkcji JavaScript do Kontroli Pop-upa
Teraz dodajemy funkcje JavaScript, która będzie odpowiedzialna za wyświetlanie i zamykanie pop-upa. Oto prosty przykład:
document.addEventListener("DOMContentLoaded", function() {
const popup = document.getElementById("popup");
const closePopup = document.getElementById("close-popup");
popup.style.display = "block"; // Pokazuje pop-up po załadowaniu strony
closePopup.addEventListener("click", function() {
popup.style.display = "none"; // Zamyka pop-up po kliknięciu przycisku "Zamknij"
});
});Wyświetlenie Pop-upa po 30 sekundach
Aby pop-up wyświetlał się dopiero po 30 sekundach od załadowania strony, możemy wykorzystać funkcję setTimeout() w JavaScript. Poniżej znajdziesz kod JavaScript, który to realizuje:
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
const popup = document.getElementById("popup");
popup.style.display = "block";
}, 30000); // 30000 milisekund = 30 sekund
});W powyższym kodzie wywołujemy funkcję setTimeout(), która wykonuje określone działanie (w tym przypadku pokazanie pop-upa) po określonym czasie (30 sekund).
Gratulacje! Teraz wiesz, jak stworzyć własne wyskakujące okienko pop-up na swojej stronie internetowej. Pamiętaj jednak, aby stosować je z umiarem i dbać o dobre doświadczenia użytkowników. Powodzenia!
