Cały ten artykuł jest dosyć długi, ale szczegółowo opisuję w nim jak powstawały moje okienka popup.

Poniżej możesz pobrać gotową paczkę, którą zainstalujesz u siebie na stronie.

Pobierz paczkę z popupem

Kiedy w 2014 roku pisałem pierwszą wersję artykułu „Jak zrobić okienko popup (i exit popup) w JavaScript?” miałem problemy ze znalezieniem jakiegoś sensownego rozwiązania (wtyczki czy skryptu) które wyświetlałoby na blogu WordPress takie wyskakujące okienko.

Założenia były takie:

  • Popup ma wyskakiwać po pewnym czasie (kilka sekund), który można sobie ustawić
  • Okienko ma się pokazywać wtedy, gdy osoba wychodzi ze strony (exit popup)
  • To nie wszystko. Popup musi też wykorzystywać cookies w JavaScript, żeby nie pokazywał się dla danej osoby za każdym razem, gdy wchodzi ona na stronę – byłoby to męczące i odstraszające
  • Ciasteczko ustawiane jest po tym, jak popup zostanie wyświetlony. Jeżeli przed pokazaniem okienka ciasteczko już istnieje – popup nie pokaże się

Okienko popup

Zazwyczaj kiedy szukam jakiejś wtyczki do WordPressa, od razu ją testuję i sprawdzam czy spełni moje wymagania. Często jest tak, że po 5 minutach jest usuwana, bo po prostu się nie nadaje.

W momencie pisania poprzedniej wersji było dosyć kiepsko, jeśli chodzi o wybór, ale dzisiaj jest tylko trochę lepiej. Nie ma co się oszukiwać – spora część wtyczek do WordPressa albo jest nieciekawie napisana albo tylko w pewnej części spełnia swoje zadanie.

Częste bolączki, to praktycznie zero optymalizacji kodu, niezrozumiałe działanie czy niepotrzebne obciążanie strony.

Idealny będzie przykład wtyczek społecznościowych. Załóżmy, że chcesz na swojej stronie pokazać przyciski „Lubię to”, „Udostępnij”, „Tweetnij” itd., ale kiedy wybierasz tylko Facebooka, w tle i tak ładują Ci się pliki Google Plus, Twittera i innych społecznościówek, których w ogóle nie wybrałeś.

Wtedy blog dostaje czkawki, każdy odwiedzający musi pobierać dodatkowe setki kB danych i summa summarum nikt nie jest zadowolony.

Jeżeli szukasz jakiejś wtyczki, która zrobi popup za Ciebie, mogę polecić:

  • Icegram – okienka popup, hellobar i wiele innych funkcji. Wydaje mi się, że to najciekawsza wtyczka jaką znalazłem (a szukałem dosyć długo)
  • WordPress Popup – również popularny plugin, ale skupiony tylko na popupach

Są dostępne w pełni za darmo, ale są też z nimi pewne problemy. Jeżeli potrzebujesz jakichś dodatkowych funkcjonalności, motywów, włączonych opcji – musisz kupić wersję premium.

Szukając pluginów często było tak, że jeden można było świetnie skonfigurować, ale był problem z podłączeniem go do autorespondera czy dostosowania wyglądu. Drugi miał większość potrzebnych funkcji i świetny wygląd, ale obsługiwał tylko jeden autoresponder (dosyć drogi).

Mogę tak wymieniać w nieskończoność. Zazwyczaj najlepsze rozwiązania są płatne.

Postanowiłem więc sam stworzyć sobie taki popup wykorzystując najnowsze jQuery 3. Poprzednie okienko korzystało też z elementu Modal z Bootstrapa, bo właśnie na Bootstrapie oparty był poprzedni szablon tego bloga.

Dodatkowo wziąłem pod uwagę zapytania i opinie osób, które używały poprzedniego popupa i stworzyłem nową wersję z myślą, że będzie na tyle uniwersalna, by każdy mógł wdrożyć ją u siebie na stronie.

 

Jak krok po kroku stworzyłem okienko popup w JavaScript

Założenia już znasz – pora na wygląd. Chciałem uzyskać efekt jednocześnie prosty, minimalistyczny, ale również przyciągający uwagę i takie właśnie są okienka prezentowane przez Leadpages.

Zresztą, na zdjęciu wyżej widziałeś, że efekt jest całkiem podobny. Po lewej stronie mamy obrazek, zaś po prawej: wyróżniający się nagłówek, a zaraz pod nim pole na maila oraz duży przycisk.

Dodatkowo, pole na adres email ma prostą walidację – sprawdzam czy jest wypełnione oraz czy email jest poprawny. Popup można zamknąć klikając w „x” oraz poza nim – na ciemnym tle, które się pojawia.

 

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

 

Zaczynamy od szkieletu – kod HTML5

Jeżeli nie korzystam z Bootstrapa, każdy projekt zaczynam od dołączenia pliku Normalize.css. Dba on o to, by treść całej strony wyświetlała się jak najbardziej podobnie we wszystkich przeglądarkach. To coś w rodzaju CSS reset, tyle że nie wyrzuca wszystkich stylów z elementów, ale je „normalizuje”.

Kolejno przygotowuję strukturę całego HTMLa, by potem, tworząc style CSS mieć już gotowca, którego wystarczy ostylować.

Krok po kroku:

to nakładka, ciemne tło, które pojawia się razem z popupem, by przykryć resztę strony.

Klasa „visuallyhidden” to specjalny „trick” w CSS, który pomaga sprawić, by element był niewidoczny, ale jednocześnie dostępny dla osób, które czytają z czytników ekranów. Chodzi o tak zwane „accesibility”.

to przycisk w prawym górnym rogu, którego użyjemy do zamykania okienka. Popup będzie też zamykany, jeżeli osoba kliknie poza nim, w miejsce ciemnego tła.

Co do reszty kodu – myślę, że jest jasna. Mamy miejsce na obrazek po lewej stronie, a po prawej nagłówek, formularz, akapit z klasą validation-errors, by można było wyświetlić komunikaty o błędach oraz informację o tym, że dane są bezpieczne.

Dalej wystarczy już tylko umieścić pliki JavaScript, czyli jQuery w najnowszej wersji 3, bibliotekę JavaScript Cookie, która uprości zabawę z ciasteczkami oraz skrypty potrzebne do obsługi popupa (popup.js) czy rozpoczęcia działania całej aplikacji (main.js)

 

Wygląd, czyli style CSS3

Zacznijmy od nakładki na całą stronę – ma przykrywać wszystko pod spodem, ale jednocześnie być lekko prześwitująca. Mam też z-index ustawiony na wysoką wartość, by mieć pewność, że żaden inny element nie znajdzie się ponad naszą otoczką

Kolejno popup. Chcę, by był miał pod sobą lekki cień, białe tło i był ponad ciemną, przykrywającą warstwą (jeszcze wyższy z-index).

Aby wyśrodkować go w pionie i poziomie, warto użyć Flexboxa z CSS3. Wystarczy, że dodasz następujące style CSS

Przycisk do zamknięcia okienka umieszczony w prawym górnym rogu, zaokrąglony:

Wielki żółty przycisk, który posłuży do wysłania formularza:

I na sam koniec krótka informacja o bezpieczeństwie danych:

To są najbardziej istotne style, o których trzeba wiedzieć. Reszta – wedle uznania. Pominąłem tutaj wersję responsywną, ponieważ wszystko jest już w gotowej paczce.

 

Najważniejsza część – kod JavaScript

Dla celów organizacyjnych, główne pliki podzieliłem na 2 części: main.js (inicjalizacja popupu) oraz popup.js (wszystko co odpowiedzialne za działanie okienka).

Dodatkowo, w przypadku popup.js zastosowałem wzorzec projektowy, który nazywa się Revealing Module Pattern.

Polega to na tym, że kod obejmujemy anonimową funkcją, która jest automatycznie wywoływana, a wynik jej działania jest przypisywany do jakiejś zmiennej. Brzmi skomplikowanie, ale w praktyce jest proste:

Jest dużo zalet takiego rozwiązania. Po pierwsze mamy pewność, że kod wewnątrz takiej funkcji nie będzie kolidował z innym kodem w naszym projekcie. Jest chroniony.

Możemy przecież mieć dołączonych kolejnych 20 plików, a jeśli jakaś zmienna będzie nazywała się tak samo, jak ta w naszym popupie – wystąpi konflikt nazw i skrypt przestanie działać.

Druga zaleta, to od teraz możemy wykorzystywać Popup jako wielki pojemnik na wszystko, co dzieje się wewnątrz. Na końcu widzisz instrukcję return – w ten sposób przekazujemy do Popup informację, że takie funkcje mają być w nim dostępne do użycia na zewnątrz, np. w pliku main.js.

Za chwilę zobaczysz, że w main.js użyjemy stworzonej funkcji Popup.init(), by w czytelny sposób zapoczątkować naszą aplikację. Po prostu przekażemy potrzebne ustawienia – popup będzie konfigurowalny.

Trzecia, najważniejsza zaleta: kod jest modułowy, to znaczy podzielony na malutkie fragmenty, a dzięki temu dużo bardziej czytelny, prostszy do zrozumienia i pracy nad nim.

 

Zmienne i konfiguracja

Jedną z dobrych praktyk podczas tworzenia projektów tego typu – czyli narzędzi do wykorzystywania przez inne osoby, które niekoniecznie znają JS – jest umożliwienie prostej konfiguracji.

Dlatego też na samej górze kodu umieściłem lokalne zmienne, które będą przydatne podczas działania popupu.

Zmienna s to po prostu skrót od settings (ustawienia). Będziemy do niej przypisywać wartości, które pobierzemy w pliku main.js. Później zobaczysz funkcję init, która się tym wszystkim zajmie – po prostu przeniesie to, co ustawimy w main.js do naszej zmiennej s, byśmy mogli wykorzystywać to podczas działania okienka.

Funkcja do ustawiania ciasteczka

Będziemy ją wykorzystywać podczas pokazywania popupa, by mieć pewność, że zostanie on wyświetlony tylko raz co X dni. Ustawiamy ciasteczko o nazwie ‚popup-shown’ i wartości ‚true’, które wygasa za 3 dni od pojawienia się okienka.

Funkcja do zamykania okienka

Po prostu do ciemnej nakładki w tle i do popupa dodajemy klasę visuallyhidden, by stały się niewidoczne, ale dostępne dla czytników. Dodatkowo przestawiam sobie wartość zmiennej isPopupVisible na false, by w prosty sposób sprawdzać potem widoczność popupa.

Funkcja do pokazywania okienka

Najpierw musimy sprawdzić czy jakieś inne okienko jest już widoczne. Jeśli tak – nie ma sensu pokazywać kolejnego.

Aby je wyświetlić, z nakładki i popupa usuwamy klasę visuallyhidden. Informujemy też kod, że popup jest widoczny oraz ustawiamy ciasteczko.

Funkcja do informowania o błędach w formularzu

Działanie jest dosyć proste: do akapitu, w którym wyświetlamy błąd, dodajemy klasę error – czyli po prostu zmieniamy kolor na czerwony.

Do pola z emailem również dodajemy tę klasę, ale dodatkowo ustawiamy na nim zdarzenie „focus”, czyli tak, jakbyśmy kliknęli w to pole – możemy je edytować i zachowuje się to bardziej intuicyjnie.

Ostatecznie, zaraz pod emailem, pokazujemy komunikat z błędem.

Inicjalizacja i pobieranie ustawień

To już ostatnia funkcja, jakiej potrzebujemy w tym projekcie. Zaczyna się w taki sposób, ale rozdzielę ją na kilka części

Najpierw zobacz kod, a poniżej omówię co się tutaj dzieje

Na początku do zmiennej s (czyli nasze lokalne ustawienia) przypisuję wszystko to, co użytkownik wysłał mi w pliku main.js (będzie poniżej).

Kolejno ustalam co ma się dziać, gdy ktoś kliknie w „x” lub w ciemne tło poza popupem. Jednocześnie upewniam się, że nic się nie stanie, gdy ktoś kliknie w sam popup.

Czas na walidację formularza

Krótko mówiąc działa to tak, że w momencie wysłania formularza, sprawdzam pole email.

Jeżeli jest puste lub nie zawiera poprawnego emaila, przerywam wysyłanie formularza i wyświetlam komunikat. Gdy wszystko jest ok – zamykam popup i wysyłam formularz.

Ostatnia część kodu odpowiada bezpośrednio za to, by popup pokazywał się automatycznie po x sekundach oraz przy wyjściu ze strony.

Sprawdzam, czy popup w ogóle może się pokazać – ciasteczko. Jeżeli tak – pokaż go automatycznie po 5 sekundach oraz wtedy, gdy kursor będzie zbliżał się do górnej krawędzi.

Ostatnia część: plik main.js, czyli wykorzystujemy moduł Popup i wywołujemy funkcję init. Przesyłamy do niej od razu elementy, które wykorzystamy wewnątrz modułu.

Uff, to już koniec. Na początku pewnie cały ten kod wyda Ci się skomplikowany, ale kiedy spędzisz nad nim parę minut, wszystko powinno wydać się jasne.

 

Tym sposobem stworzyliśmy wyskakujące okienko z funkcją pojawiania się, gdy użytkownik wychodzi ze strony.

Koniecznie daj znać co o tym sądzisz w komentarzu.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

    • Powiedz Łukasz dokładnie co Ci nie działa i postaram się pomóc. Przypominam, że przykład opiera się o framework Bootstrap, ale napisałem też co trzeba zmienić, żeby popup zadziałał przy „normalnie” tworzonych stronach.

      • Sorki, że dopiero teraz się odzywam, ale temat odłożyłem do… dzisiaj :-p
        Otóż mam stronę działającą na php i mysql. W pliku na stronie głównej main.php po wklejeniu kodu nic nie wyskakuje. Plik index.html dobrze wczytuje okienko popup, ale nie wiem jak połączyć to ze swoim kodem php :-/

  • Hej, a masz może rozwiązanie dla takiej sytuacji jakbym chciał aby okienko z playerem radiowym jaki mam, otwierało się na różnych stronach na których zamieszczę banner (guzik) do odpalenia radia, ale bez zamieszczania na tych stronach dodatkowych wpisów? Po prostu daję komuś kod jaki wkleja jako bannerek, a po kliknięciu wyskakuje nowe okienko popup z radyjkiem. Z góry dzięki za pomoc ;)

    • Bartek, tutaj można wykorzystać JavaScript. Tworzysz plik .js, w tym pliku używasz np. funkcji document.write, żeby wyświetlić kod HTML, CSS i skrypty odpowiedzialne za wyskakujące okienko.

      Taki plik JavaScript ładujesz potem na stronie, na której chciałbyś mieć wyskakujące okienko.

    • Witaj Konrad,
      jeżeli na tej platformie masz dostęp do kodu HTML i JavaScript, to po prostu przekopiuj go z tej strony i powinno wszystko działać. Pamiętaj, że jeśli nie masz na stronie frameworka Bootstrap (albo nie masz takiej pewności), to znajdziesz tutaj też zamienne funkcje.

      To znaczy zamiast: modal(‚show’)… możesz użyć $(‚#popup’).fadeIn(300); (wszystko w artykule)

  • Witam,

    Jestem zielony w temacie JavaScript, więc proszę o pomoc. Na stronie ma się wyświetlać element w HTML (poniżej).
    Niestety, gdy zmieniam id=”dropin” na id=”popup” popup na stronie przestaje się wyświetlać w dotychczasowy sposób. Właściwie to się w ogóle nie wyświetla.. Po powrocie do „dropin” wszystko działa „po staremu”.

    Gdzie może leżeć przyczyna?
    Dodałem plik popup.js do katalogu /js/
    modal(‚show’) zamieniłem na $(‚#popup’).fadeIn(300);

    Gdzie leży mój błąd?

    <a href=”#” rel=”nofollow”>[Zamknij Okno] </a>
        Uwaga: Pobierz Raport

    • Pamiętaj Rafał, że elementy są stylowane w pliku CSS. Jeżeli zmieniasz w HTMLu ID tego popupa, to musisz też to zmienić w pliku ze stylami – style i HTML są połączone.

  • Dzięki za skrypt, działa bardzo dobrze. Chciałbym żeby okienko miało w górnym rogu krzyżyk do zamykania. Możesz mi pomóc to zrobić?

  • Tak dla potomnych, jeżeli ktoś nie ma modal z Bootstrapa to zwykły div można wyświetlić wpisując zamiast $('#popup').modal('show'); to document.getElementById("popup").style.display = "block"; a dodatkowo w niektórych przeglądarkach document.cookie = nazwa+"=" + wartosc + expires + "; path=/"; nie działa, dlatego trzeba wpisać bez patha czyli document.cookie = nazwa+"=" + wartosc + expires;

  • Witam, dziekuje za gotowy skrypt- działa!. Niestety jednak, popup ustawiony mam na 20 sekund. Jeśli czytelnik wcześniej przejdzie na inną stronę to popup się już nie wyświetli, bo ciasteczko zapisało się w momencie wejścia na stronę za pierwszym razem. Jak to naprawić ? Z góry dziękuję za radę!

  • Próbowałem to zaadaptować do joomli jednak mam taki problem skryot dziala jednak nie znika i jak odswiezam to za kazdym razem sie wyświetla wiec coa nie dzialaja mi cookie z góry dzięki za pomoc

      • Udało mi się to zrobić dopisałem funkcje .hide i się ukrywa. Jeżeli chciałbym dodać krzyżyk zamykający to okienko to gdzie mam wpisać kod i jak wg Ciebie powinien wyglądać? w plik z css czy index czy popup?

        • Jaki kod? To zależy jak chcesz to rozwiązać, możesz to zrobić na 1000 sposobów.

          Proponuję:

          W HTML: <span id=”popup-close”>x</span>
          W CSS:
          #popup-close {
          cursor: pointer;
          /* Możesz go wypozycjonować do prawej górnej krawędzi popupa */
          position: absolute;
          top: 0; right: 0;
          }

          Jeżeli masz już funkcję do zamykania okienka, to podepnij to samo pod popup-close.

          Możesz użyć addEventListener (zdarzenie click) lub document.getElementById(‚popup-close’).onclick = function() { … }

          • w pliku popup.js mam wpisany kod

            // ustawianie Cookie

            function ustawCookie(nazwa, wartosc, dni) {
            if (dni) {
            var data = new Date();
            data.setTime(data.getTime()+(dni*24*60*60*1000));
            var expires = „; expires=”+data.toGMTString();
            } else {
            var expires = „”;
            }
            document.cookie = nazwa+”=” + wartosc + expires + „; path=/”;
            }

            // wyswietlanie popupa

            $(document).ready(function () {

            // gdy popup nie byl jeszcze wyswietlony

            if (document.cookie.indexOf(„popup”) < 0) {

            // wyswietl go po 15 sekundach
            setTimeout(function () {
            $('#popup').fadeIn(300);
            }, 5000); // milisekundy

            // lub wyswietl przy wychodzeniu ze strony
            setTimeout(function() {
            $('#popup').hide();
            }, 11000);

            // wyswietl ponownie po 3 dniach
            // odkomentuj poniższą linijkę, by okienko pojawiało się co X dni

            ustawCookie("popup", "1", 3);

            }

            });

            i teraz co mam pod to wkleić w tym pliku aby smigało

          • mam w index.php dodane

            x

            w plik template. css dodałem tak jak pisałes

            #popup-close {

            cursor: pointer;

            position: absolute;

            top: 0; right: 0;

            }

            natomiast w plik popup.js
            dodałem to co ostatnio napisałes zamiast funkcji settimeout

            wyswietla mi sie popup ale wg nie znika ani na klikniecie gdziekolwiek ani nie pojawia sie krzyżyk zamykajacy

  • Hej, mam pewien problem i nie rozumiem czemu tak się dzieje.
    Zrobiłam okno modalne, które włącza się automatycznie zaraz po załadowaniu się strony. niestety, jak okienko się pojawia strona się delikatnie rozszerza i widać to bo menu się przesuwa. Psuje mi to jeszcze jedną rzecz (wydaje mi się że to ta sama przyczyna)- na dole są loga które normalnie były w jednej linii i przesuwało się je strzałką, a teraz rozjechały się na 3 linie, wygląda to nieładnie i nie ma strzałeczek do przesuwania :c. Wiesz czego to może być przyczyna? Może chodzi o plik CSS bootstrapa? jeśli tak, to jak sprawdzić co jest mi z tego pliku css potrzebne do okienka i po prostu skopiować tylko to do pliku ze stylami? (ten plik ze stylami bootstrapa jest tak długi że po chwili poddałam się w przeszukiwaniu go tak „ręcznie” :D)

    dzięki za pomoc :)

  • Świetna robota!
    Wytłumaczone tak, że nawet laik to zrobi!
    Dzięki za poświęcony czas!
    Oby więcej takich poradników jak Twój :)
    Pozdrawiam!

  • a co ustawić, aby działał ten przycisk „wyślij” ? trzeba wywołać jakąś funkcję chyba, aby wyślało np. wiadomość na mail.
    Powiesz co zrobić tu w kodzie?

    • Cześć, tak. Potrzebujesz (najlepiej) jakiegoś systemu do wysyłki maili, pod który możesz podpiąć cały ten newsletter. Aktualnie korzystam z GetResponse (tutaj link z bonusem 100 zł: https://jakubjurkian.pl/getresponse) i nie ma większych problemów z jego obsługą. Polecam też MailChimp – zagraniczny, ale darmowy do 2000 kontaktów.

  • Cześć

    przypadkiem zamkne popupa a chcę go spowrotem uruchomic np klikajac w link w rogu strony jak to zrobic?

    robię onclick show i nie chce dzialac

    • zrobiłem taki mały hack ale działa :)

      $(‚#reset-cookie’).on(‚click’, function() {
      Cookies.remove(‚popup-shown’);
      window.location.reload();
      });

  • Okej, wszystko fajnie. Ale jak teraz wgrać to na już istniejącą stronę? Wkleić kod z „indexu” do swojego indeksu strony, czy wgrać te pliki na serwer, czy dołączyć jakieś JS do głównego indexu strony?

    • Po prostu trzeba „zintegrować” (przenieść) moje pliki z Twoimi plikami strony. Mój popup do działania potrzebuje kodu HTML, stylów CSS i skryptów JS, które są w paczce z plikami. Żeby całość działała poprawnie, musisz te pliki dołączyć do swojej strony. Każda ma inną budowę, więc nie ma tutaj jednej gotowej instrukcji.

      • Dzięki za odpowiedź. No cóż, pobawię się.

        A poza tym, świetny artykuł (y) wielki + za pliki i opisanie funkcji i kodu :)

  • Witaj Jakub, Dzisiaj trafiłem na Twój blog i jeśli znajdę tu więcej takich poradników krok po kroku to pewnie wrócę nie raz.

    mam pytanko odnośnie tego popupa. Czy aby skonfigurować go z cms lub z forum to to jest dużo pracy? Jak to zrobić ? Przecież nie trzeba od razu płacić tym wszystkim autoresponderom skoro są darmowe rozwiązania. Wiem że swego czasu na wordpressie wysyłałem mailing jakąś wtyczką i szło sprawnie. Tak samo skrypty for (mybb , ipboard) mogą wysyłać mailingi (wiem – proste, ale są)

    Tak więc tutaj pytanie jak to ostatecznie zrobić w takiej wersji aby mail został wysłany przez serwer poczty wychodzącej (np mojej domeny forum na IP Board ) i np dostał wiadomość w której będzie musiał potwierdzić że mail jest ok. Jak to zrobić najprościej ?

    • Tak, są darmowe, ale są w nich pewne ukryte koszty. Załóżmy, że masz bazę 1000 osób, które są zainteresowane Twoimi działaniami. Wysyłasz do nich maila, a otrzymuje go 80-90% osób. Więc załóżmy, że 100 osób albo nie otrzyma wiadomości, albo wyląduje u nich w spamie – to tylko przykładowe liczby, ale gdy wysyłasz mailingi ze zwykłego konta mailowego, to tak może to wyglądać.

      Pytanie czy stać Cię na takie ukryte koszty, bo w przypadku większych list te liczby będą rosnąć.

      Co do integracji ze stroną – pewnie w przypadku CMSów czy for, jak IP Board, będą jakieś gotowe rozwiązania – nie znam, więc nic tu nie podpowiem. W przypadku „zwykłej strony” wystarczy dołączyć popup do strony (pliki HTML, CSS, JavaScript) i wykorzystać PHP + PHPMailer, żeby skonfigurować wysyłkę.

      • ma tylko jedno pytanie, mianowicie czy dla chroma jest wsparcie z tym okienkiem ponieważ na chromie mi nie wyskakuje a na IE tak. A i czy jest możliwość aby okienko nie wyświetlało się na urządzeniach mobilnych >?

        • Tak, powinno działać bez problemów na Chromie. Zobacz w konsoli (klawisz F12 -> zakładka Console/Konsola) czy nie ma jakichś błędów.
          Co do wyświetlania na mobilnych – najprościej ukryć je korzystając z Media Queries w stylach CSS, np.:
          @media (max-width: 480px) {
          #popup { display: none; }
          }

    • Dobry pomysł Agnieszka, bo mogłoby to przynieść trochę więcej konwersji, ale… raczej nie do wykonania.

      W tym popupie skrypt wykrywa moment, gdzie osoba przeciąga kursor blisko górnej części strony – tak, jakby miała zaraz zamknąć kartę.
      Na smartfonach jest ten problem, że zamykasz stronę i… tyle. Nie ma jak tego wykryć.

      Można też wrzucić jakieś (ograniczone) okienko w momencie, gdy osoba zamknie kartę, ale zazwyczaj nie jest to mile widziane przez ludzi, raczej odstrasza.

  • Wow, co za szybka odpowiedź! Dzięki :-) Tutaj znalazłam podpowiedź: https://blog.privy.com/blog/does-exit-intent-work-on-mobile …i zastanawiam się, jak to zrobić w praktyce. Wystarczy skorzystać ze zdarzenia unload? Pop-up zdąży pojawić się przed zamknięciem strony i pojawi się zarówno po kliknięciu krzyżyka na górze, jak i przycisku back na telefonie?

    Ewentualnie zastanawiałam się nad tym, czy po prostu nie wyzwalać pop-upa, gdy użytkownik nie tyle będzie przeciągał kursor myszki do góry strony, co kliknie – dotknie ekranu palcem – na górze strony.

    • Szczerze: nie mam pojęcia jak to zadziała, bo chyba nigdy nie wykorzystałem unload.
      Widziałem natomiast okienka na wielu stronach, gdzie wyświetlał się domyślny alert() z jakąś informacją i dopiero po jego zamknięciu była możliwość wyjścia ze strony.

      Co do drugiej kwestii – można tak zrobić. Jeśli osoba jeszcze nie widziała okienka, to w momencie, gdy kliknie w górną część strony, tak jakby miała wychodzić – można to okienko pokazać. Lepiej raz niż wcale.

      Ważne, by to wszystko nie było inwazyjne, bo efekt będzie całkowicie odwrotny od zamierzonego :)

  • Witam. Mam problem ze znalezionym w sieci modal-message. Na lokalnym komputerze wszystko jest OK – tzn. okienko pojawia się zawsze na środku okna przeglądarki nawet wtedy, kiedy przewijam stronę. Na serwerze już tak pięknie nie jest – owszem okienko się pojawia, ale na środku strony – czyli: muszę przewinąć stronę, żeby je zobaczyć…
    Strona jest przeznaczona dla dzieci i zawiera test z podpowiedziami – właśnie o te podpowiedzi mi chodzi.
    Czy mogę liczyć na pomoc? Chętnie podeślę pliki do przeglądnięcia.
    Pozdrawiam.

    • Witaj Andrzej, tutaj mogę podpowiedzieć, że pewnie kod z komputera nie jest identyczny z tym, który jest na serwerze. Chodzi o HTML i CSS. Lub też oprogramowanie na serwerze dodaje coś od siebie.

      Ja sam mam mało czasu, ale być może ktoś z odwiedzających odpisze na Twój komentarz.

  • Witam,

    Super poradnik, wszystko fajnie działa tylko mam jeden problem, a mianowicie w ustawieniach css mam:

    .popup-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    overflow: auto;
    }

    Problem w tym, że okno zachowuje się jakby nie miało „position: fixed;”, cały czas stoi w miejscu zamiast się przesuwać za ekranem. Jakiś pomysł na to?

    Pozdrawiam.

  • #Andrzej

    Spróbuj

    /* Popup */
    .popup {
    position: fixed;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.35);
    z-index: 10001;
    padding: 8px 8px 20px;
    max-width: 840px;
    width: 100%;
    margin: 30px auto;
    background: #fff;
    }

  • Witam powiedz jak sprawić żeby popup nie otwierał sie gdy tylko kursor zbliży się do górnej krawedzi strony, tylko nieco wyżej np. na pasku adresu

  • Siemka chce dać zdjęcie na całą szerokość i wysokość okienka pop up aby było na samym dole pod elementami jak to rozwiązać ??

  • Skrypt fajny ale jak zrobić żeby komunikat nie przesuwał zawartości na dół przy wyświetlaniu a nakładał się na widok strony?

  • Czy ktoś mi może pomóc?

    Gdzie moge ściągnąć całe pliki

    scripts/js.cookie.js
    scripts/popup.js
    scripts/main.js

    ?

    Tu ponoć jest to kawałkami pocięte.. Boję się, że coś zepsuję łącząc to wszystko.

  • Jakubie,

    Chodzi mi o ten kod powyżej co go rozdzieliłeś na kawałki..
    Nie wiem jak go skleic w jedno… Jaki kod na być w main.js a jaki w popus.js

    Masz gdzieś gotowe te dwa pliki?

    var Popup = (function () {

    // Przykładowy kod
    var setCookie = function() {
    Cookies.set(‚popup-shown’, ‚true’, {
    expires: 3
    });
    };

    // Pobierz ustawienia
    var init = function() {

    }

    return {
    init: init,
    setCookie: setCookie
    }
    })();

    // Local variables
    // s == settings

    var s = {},
    isExitPopupShown = false,
    previousY = 0,
    isPopupVisible = false;

    // Show popup every…
    var setCookie = function() {
    Cookies.set(‚popup-shown’, ‚true’, {
    expires: 3
    });
    };

    • Wszystko co dostajesz w paczce z popupem jest już gotowe, zawiera w sobie ten kod. Nic nie musisz dodatkowo robić, po prostu połącz te pliki ze swoją stroną i wszystko powinno działać.

  • No wlasnie pytam o te pliki… gdzie je mogę ściągnąć? bo nie widzę nigdzie tej paczki o której mówisz :)

    Dzięki bardzo za odpowiedz

  • Znalazłam :) dzięki za naprowadzenie :)

    Duży niebieski przycisk.. A ja myślałam ze to reklama GetResponse i nie potrzebowałam 100zł na start, tylko tych trzech plików i nie mogłam znaleźć :)

    Pozdrawiam i biorę się za wgranie tego.. Dam znać czy się udało ;)

  • Jakubie niestety mam problem z najnowszym Qjuery 3.1.0/jquery.min.js Nie moge go u siebie załączyć na stronie.. bo mi padaja funkcje w szablonie.. aktualnie mam /2.2.2/jquery.min.js

    oraz cos gryzie się mi z twoim main.js.. :(

    Czy masz może pomysł jak to rozwiązać? Albo mógłbyś polecić jakiś inny popup?

  • Witam,
    Czy można ustawić Twój popup, żeby wyświetlał się w godzinach od-do po określonym czasie? Np od godziny 17 do 8 kiedy jestem poza biurem po 15 sekundach jak klient wejdzie na strunę.
    Pozdrawiam

      • Dzięki za szybka odpowiedz. Czy mógłbyś podpowiedzieć których funkcji muszę użyć i w których plikach, żebym miał jakiś punkt zaczepienia, to sobie resztę doczytam :)

        • Tak może to wyglądać:
          gdy ładuje się popup, sprawdzasz czy aktualna godzina u użytkownika jest między 17 a 8 i potem decydujesz czy w danym momencie trzeba wyświetlić popup.

          W JS średnio się pracuje z domyślnymi funkcjami zw. z datą i czasem, więc warto użyć do tego biblioteki date-fns lub moment (dużo waży)

          Polecam date-fns, na dokumentacji albo StackOverflow znajdziesz wszystko co trzeba, to będzie dosyć proste.
          Nie pamiętam dokładnych nazw funkcji, zobacz tutaj: https://date-fns.org/

  • Mam pytanie, jak można skorzystać w twojego popupa powiązawszy go z wordpressem ?
    Jak co trzeba zrobić, aby popup działa w WordPressie ?

  • >