Pop-up / Modal

1 210 0
Wyskakujące okienka, okna pop-up, modal, lightbox – wiele nazw tego samego elementu czyli okna, które pojawiając się przysłania nam aktualną stronę. Zastosowań jest wiele, na pewno każdy kojarzy irytujące reklamy, które się w nich pojawiają lub zachęcają do zapisania się do newslettera. Ale korzystamy z nich także przeglądając galerie zdjęć na stronach lub czytając krótkie opisy produktów. W tym wpisie dowiemy się jak zbudować modal z pomocą Bootstrapa.

Podstawowy przykład

Kod HTML modala jest dość rozbudowany ale nazwy klas są intuicyjne, więc nie powinniście mieć problemu ze zrozumieniem gdzie umieszczać treści. Żeby nie przekombinować opiszę je krótko oraz umieszczę w kodzie przykładu komentarze z opisem za co odpowiadają kolejne elementy.

Nie wszystkie elementy są obowiązkowe ale o tym w przykładzie z uruchamianiem modala

  • .modal – wrapper całego modala
  • .modal-dialog – wrapper okna modala
  • .modal-content – wrapper zawartości modala
  • .modal-header – wrapper nagłówka modala
  • .modal-title – tytuł w nagłówku modala
  • .modal-body – wrapper treści modala
  • .modal-footer – wrapper stopki modala

Przykład

Kod

Wyświetlanie modala

Wiemy już jak jest zbudowany nasz pop-up, więc pora go uruchomić. Najprostszym przykładem będzie użycie do tego przycisku. Aby nasz modal się uruchomił trzeba spełnić dwa warunki. Po pierwsze div z klasą .modal musi mieć również identyfikator ( w poniższym przykładzie #przykladowyModal1 ) a przycisk, który ma uruchomić modal musi posiadać parametry data-toggle="modal" oraz data-target="#przykladowyModal1". Drugi z parametrów musi kierować do identyfikatora jaki nadaliśmy modalowi. W przypadku większej ilości modali na stronie, każdy musi mieć unikalny identyfikator.

Jak pisałem wyżej, nie wszystkie elementy są obowiązkowe. Możemy na przykład zrezygnować z nagłówka lub stopki. Przykłady poniżej

Podstawowy przykład

Przykład

Kod

Modal bez nagłówka

Aby usunąć nagłówek, usuwamy diva z klasą .modal-header z całą jego zawartością

Przykład

Kod

Modal bez stopki

Aby usunąć nagłówek, usuwamy diva z klasą .modal-footer z całą jego zawartością

Przykład

Kod

Modal z dużą ilością treści

Gdy zajdzie potrzeba umieszczenia w modalu dużej ilości treści nie musimy martwić się o jego przewijanie. Zajmie się tym Bootstrap

Przykład

Kod

Wyśrodkowany modal

Jak pewnie zauważyliście w pierwszym przykładzie, modal wyświetla się u góry ekranu. Gdybyśmy chcieli wyśrodkować go w pionie i w poziomie, wystarczy aby divovi z klasą .modal-dialog dodać klasę .modal-dialog-centered

Przykład

Kod

Siatka / Grid w modalu

W poprzednich przykładach umieszczaliśmy treść modala tylko wewnątrz diva .modal-body i ograniczaliśmy się do paragrafów tekstu. Twórcy Bootstrap pozwalają zrobić bardzo duży krok naprzód i umieszczać wewnątrz modala siatkę czyli rzędy i kolumny a także je zagnieżdzać. Dzięki temu możecie układać jego zawartość dokładnie według swoich potrzeb.

Przykład

Rozmiary modala

Dla niektórych elementów, twórcy Bootstrap przygotowali gotowe klasy definiujące ich wielkość. Identycznie jest dla modala. Dodanie do diva z klasą .modal-dialog klasy .modal-sm wyświetli nam okno mniejsze od standardowego. Natomiast dodanie klasy .modal-lg spowoduje pojawienie się większego popupa.

Mniejszy modal

Przykład

Kod

Większy modal

Przykład

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (4 głosów, średnia: 5,00 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*