Blog HTML5

Blog HTML5 - StronaW

Jak Stworzyć Własne Wyskakujące Okienko Pop-up?

Jak Stworzyć Własne Wyskakujące Okienko Pop-up?

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ść na block, 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!

Podoba Ci się? Udostępnij ten post, aby zainspirować innych!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on email
Email
Share on whatsapp
WhatsApp

Podziel się swoją Opinią

4.4 39 Głosy
Article Rating
Subscribe
Powiadom o
guest
0 komentarzy
Zobacz wszystkie komentarze

Masz kłopoty ze swoją stroną internetową?

Nie martw się! Skontaktuj się z nami, a nasz doświadczony zespół rozwiąże wszelkie problemy techniczne. Twój spokój i sprawnie działająca strona są dla nas priorytetem!

Napisz do nas StronaW
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on whatsapp
WhatsApp
Share on email
Email
Share on tumblr
Tumblr

Masz pytania? Chętnie pomożemy! Skontaktuj się z nami, a odpowiemy na wszystkie Twoje zapytania.