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 ;)

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