Modal, czyli wyskakujące okienko dla każdego

Wyskakujące okienko nie brzmi dzisiaj dobrze. Większość zaprawionych internautów kojarzy je z natrętnymi reklamami i gołymi paniami wyskakującymi w najmniej odpowiednim momencie. Nie da się jednak ukryć, że w większości przypadków dobrze spełnia swoją rolę, tym bardziej, że od kilku lat towarzyszy nam w mniej natrętny i milszy oku sposób – jako modal. W dzisiejszym artykule chcę przedstawić trzy moim zdaniem najpopularniejsze i możliwie mało natrętne sposoby wykorzystania modalnych okienek.

DemoPobierz

Co będzie potrzebne

Tradycyjnie już bazą dla naszego przykładu będzie Twitter Bootstrap. W swojej bogatej kolekcji pluginów posiada też skrypt pozwalający na łatwą i bezproblemową obsługę modali. Wykorzystamy też plugin jquery.cookie, by zapisywać informacje o zaprezentowanym okienku.

Przykład 1 – Facebook Likebox

Modale zdecydowanie najczęściej wykorzystywane są do nakłonienia użytkowników do polubienia naszej strony w serwisach społecznościowych, głównie na Facebooku.

HTML

Kod HTML jest bardzo prosty. Niemal w całości pochodzi z dokumentacji Bootstrapa. W .modal-body wstawiamy własną treść – w naszym przypadku ramkę z Likeboxem.

JavaScript

Kod jQuery to zaledwie kilka linii. Najpierw inicjujemy plugin na elemencie zawierającym modal. Przy okazji ustawiamy kilka ważnych opcji:

  • keyboard – pozwala (lub nie) na zamykanie modala klawiszem Esc
  • backdrop – odpowiada za zamykanie okienka poprzez kliknięcie na zaciemnioną część strony
  • show – sprawia, że modal zostanie wyświetlony przy jego inicjalizacji

Opcję show ustawiamy domyślnie na false, gdyż wyświetlaniem okienka chcemy sterować ręcznie. Likeboxa wyświetlamy tylko w przypadku braku odpowiedniego ciasteczka.

Po zamknięciu modala ustawiamy cookie, ważne 7 dni, by przez najbliższy tydzień nie męczyć nim użytkownika. Można pokusić się o rozwinięcie i usprawnienie tego przykładu – wyświetlać Likeboxa tylko jeśli użytkownik nie polubił jeszcze naszej strony na Facebooku, ale pozostawiam to wam jako zadanie domowe 😉

Przykład 2 – Newsletter

Kolejnym przykładem wykorzystania modali są formularze newsletterów, zachęcające do mailowej subskrypcji treści.

HTML

JavaScript

Inicjalizacja i wyświetlanie wygląda podobnie jak w poprzednim przykładzie. Różnica tkwi w zamykaniu. Po wypełnieniu i wysłaniu formularza ustawiamy ważne rok ciasteczko, wysyłamy dane (w naszym przykładzie jest to uruchomienie Feedburnera) i wreszcie zamykamy modala.

Przykład 3 – Tylko dla dorosłych

Ostatnim przykładem będzie modal z prostą weryfikacją wieku odwiedzającego naszą stronę użytkownika. Często spotykany na stronach prezentujących strony zawierające treści nieodpowiednie dla nieletnich, jest dobrym zabezpieczeniem przed konsekwencjami prawnymi dla właścicieli takich witryn.

Po potwierdzeniu wymaganego wieku przez użytkownika zapisujemy cookie i zamykamy okienko. W przeciwnym razie przekierowujemy stronę na inny adres.

Jeśli nie Bootstrap to co?

miś

Jak już wcześniej wspomniałem Bootstrap jest zbiorem pluginów. Oznacza to, że w jego źródłach można łatwo znaleźć skrypt odpowiedzialny tylko za modalne okienka. Można go osadzić na dowolnej stronie i nie powinien „gryźć się” z innymi wtyczkami. Pozostaje jednak problem z CSS-em – tu można albo wyciąć z Bootstrapa fragmenty odpowiedzialne za modale, albo skompilować go przy pomocy LESSa, albo ostylować samodzielnie.

DemoPobierz

Programista (PHP/MySQL, Node.js/MongoDB), koder (HTML/CSS/JS), ale od biedy nawet layout machnie ;)

  • Kriss

    Jak zwykle super. Jednak jak mantrę będę powtarzał: Dlaczego nie ma tego w formie pluginu do wordpressa? Wiem, wiem – tutaj sami fachowcy są, jednak takie szare myszki, które o kodzie tylko słyszały ale w nim nie grzebą, też tutaj zaglądają 🙂

    • nrm

      To poradnik jak coś zrobić, jak się NAUCZYĆ coś robić, a nie kopiuj-wklej plugin do WP. Takich pluginów pewnie jest cała masa 😉

      • Kriss

        Fakt. W takim razie może NAUCZYCIE nas maluczkich w jaki sposób stworzyć z powyższego kodu plugin do wordpressa? 😉

        • Rafał

          No ja też jestem ten maluczki 🙂

        • Maciej Płocki
          • Kriss

            Ale ja chciałbym wtyczkę z kodu, który zamieszczono powyżej. Nie napisałem, że nie mam zainstalowanej podobnej wtyczki. Bo mam. Jednak nie wiem co w niej siedzi i na ile jest bezpieczna. Kod umieszczany na webmastah wydaje mi się pewniejszy 🙂

          • Marcin Bazanowski

            Wtyczka displet pop, jest spoko.

    • sbl

      To nie jest oficjalne wsparcie wordpress polska 🙂 my tu piszemy o ogólnych aspektach świata webdeveloperskiego.

      • Kriss

        O ogólnych fakt, ale bardzo szczegółowo 🙂 Więc ci mniej ogarnięci w kodzie nie zawsze wiedzą o co biega 🙂

    • mck

      Żebyśmy jeszcze umieli robić pluginy do worpressa… 😉

      • Kriss

        Wy nie umiecie robić pluginów – my nie umiemy grzebać w kodzie 🙂

      • nrm

        Nauczyć się to nie problem ale ten PAIN IN THE ASS babrając się w WordPressie… spore poświęcenie 😉

  • Riu

    Odpowiedź na pytanie „jeśli nie Bootstrap to co?” będzie można znaleźć w następnym wpisie w dziale frontend 😉

    • skowron-line

      albo bootstrap albo śmierć

  • wusztpl

    akurat czegoś takiego rano szukałem, ale skorzystałem w końcu z http://www.ericmmartin.com/projects/simplemodal/ 😉

  • Śpiechu

    Można nieco „skomresować” JS. Mała rzecz, a cieszy 😀

    $(‚#modal-agecheck [data-agecheck]’).on(‚click’, function() {
    if ($(this).attr(‚id’) === ‚confirm’) {
    $.cookie(‚modalagecheck’, ‚true’, { expires: 365 });
    $(‚#modal-agecheck’).modal(‚hide’);
    }
    else {
    window.location.href = ‚http://webmastah.pl’;
    }
    });

    • Śpiechu

      Oczywiście if ($(this).attr(‚data-agecheck’) === ‚confirm’) …

    • mck

      Można, ale imho w przypadku tutoriala lepiej zachować maksymalną przejrzystość kodu 🙂

  • Guest

    omg jestem na zdjęciu :O 😀

  • Mic

    Proszę o pomoc
    Jak połączyć wysuwany like box oparty na musli z wyskakującym modalem?

    • mck

      A w czym konkretnie jest problem?

      • Mic

        Problem w tym że wysuwany like box działa, a jak chcę dodać modala to strona mi sie nie ładuje 🙁

        • mck

          Załóż temat na forum, wrzuć kod który już masz, zobaczymy co się da z tym zrobić 🙂

  • Karolina

    Witam,
    próbuję cały czas dojść do tego, jak zrobić, aby okienko wyskakiwało za każdym razem.
    Mogłabym prosić o drobną pomoc? Bo w życiu tego nie wykombinuje.

  • Kamil

    A jak zrobić żeby za każdym razem po wejściu wyskakiwało ?

    • mck

      Wystarczy usunąć sprawdzanie cookie. Albo przy inicjalizacji ustawić show na true.

      • Kamil

        Mozna jakiś przykład ?

  • Michu

    Wykorzystałem pierwszy przykład, zmieniłem pod siebie, ale mam problem – jak ustawić, żeby okienko wyskakiwało 1 raz dziennie? W pliku main.js mam ustawione cookies ‚true’, { expires: 1 }); a w pliku jquery.cookie.js taki kod $.cookie(key, ”, $.extend({}, options, { expires: -1 })); – nie wiem jak to ogarnąć, żeby było dobrze… Z góry dzięki za pomoc.

    • mck

      Ustawienie expires na 1 da radę 😉

  • Hrach Tigranyan

    Witam. Jestem właścicielem sklepu i potrzebuje trzeciego przykładu dla podstrony sklepu o charakterze erotycznym w tym celu skopiowałem i wkleiłem kod z trzeciego przykładu do body podstrony ale nic nie wyszło. Może jakieś wskazówki?? podaje link dla jasności http://vanlin.pl/news/n/148/ERO-HOUSE
    Pozdrawiam z podziękowaniami

Send this to a friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL