Bootstrap tutorial logo

Okienko Pop-up / Modal

autor: Robert

1 września 2014

Ten wpis będzie instrukcją jak stworzyć wyskakujące okienko (pop-up) wewnątrz którego możemy umieścić formularz kontaktowy, filmik, zdjęcie lub zachęcić kogoś do zapisania się do newslettera lub polubienia strony na Facebooku.

Sami musicie przyznać, że wyskakujące okienka są jednym z najbardziej denerwujących elementów w Internecie więc nie ładujcie ich zaraz po wejściu na stronę:)

Pop-up / Modal

Zaczynamy od stworzenia diva z klasą .modal .fade oraz wymienionymi wyżej parametrami, wewnątrz którego umieszczamy div z klasą .modal-dialog, znów wewnątrz kolejny div z klasą .modal-content.

Teraz skupimy się na zawartości diva .modal-content, który odpowiada za zawartość naszego okna.

Najpierw otwieramy div z klasą .modal-header, który jak nazwa wskazuje jest nagłówkiem naszego okna i jeśli nie jest nam potrzebny to możemy go ominąć. Wewnątrz wklejamy powyższy kod przycisku, który wyświetli nam ładny X służący do zamknięcia okna. Następnie możemy użyć dowolnego znacznika H lub paragrafu z klasą .modal-title by wyświetlić tytuł naszego okna.

Kolejnym elementem jest div z klasą .modal-body, do którego wklejamy co nam się żywnie podoba, zdjęcie, formularz kontaktowy itp itd.

Ostatni element to div z klasą .modal-footer czyli stopka naszego okna, możemy zamieścić tam przykładowo przyciski służące do wysłania formularza albo jakiś podpis. Na koniec zamykamy wszystkie otwarte znaczniki.

I to właściwie tyle. Z racji tego, że kod okienka modalnego zawiera dość dużo linijek to proponuję skopiować go sobie i tylko uzupełniać zawartości divów .modal header, .modal-body oraz .modal-footer.


Rozmiary okienka modal

Bootstrap udostępnia 2 dodatkowe rozmiary okienka pop-up, duże i małe. Tworzymy je poprzez dodanie odpowiedniej klasy do diva z klasą modal-dialog. Odpowiednio modal-lg dla dużego okna oraz .modal-sm dla małego okna.



Poniżej przykładowa strona różnymi rozmiarami okienek.
Przykładowa strona


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (9 głosów, średnia: 5,00 na 5)
Loading...

Komentarze: 14 komentarzy

Tomasz 2 października 2014 o 09:46

Czy mógłbyś dodać coś o klasie collapse i elementach korzystających z js (dropdowns,tooltips, popovers, typehead) ? :)

Odpowiedz
    Robert 2 października 2014 o 10:03

    Będzie, będzie:) Wróciłem z urlopu a jak to po wolnym bywa, roboty mam co nie miara;)

    Odpowiedz
Kuba 9 lipca 2015 o 22:50

Czy pop-upa można zrobić w karuzeli?

Odpowiedz
    Robert 10 lipca 2015 o 07:45

    Myślę, że tak. Modal to oddzielny kawałek kodu, którego nie umieszczamy w karuzeli. W sliderze wystarczy umieścić przycisk do wywołania modala i już:)

    Odpowiedz
Oliwier 1 lutego 2016 o 17:23

Można gdzieś pobrać całość ?

Odpowiedz
Mateusz 2 marca 2016 o 23:17

Witam, kopiuje cały fragment przerabiajac jedynie button jednak po wyskoczeniu popa, ekran robi się cały szary i nic nie da sie na stronie zrobic, czym to jest spowodowane? Z góry dziekuje za pomoc(super kurs:)).

Odpowiedz
    Robert 3 marca 2016 o 07:55

    A czy przy edycji buttona nie zostawiasz przypadkiem otwartego jakiegoś diva?

    Odpowiedz
      Mateusz 3 marca 2016 o 16:06

      Jak sprawdzałem teraz to wszystko mam pozamykane, z tym, że stworzyłem slidera, nad nim górne przyklejone menu i na tym menu ustawiłem pop-upa, wydaję mi sie ze cos sknociłem ze wstawianiem tego popa lub menu w odpowiednie miejsce(najpierw wstawiłem menu, w od menu wstawiłem pop-upa i pod kod do sildera)

      Odpowiedz
        Mateusz 3 marca 2016 o 16:31

        Już nic, trzeba było po prostu zamknąć za buttonem a nie za całym modalem :D
        Tak btw, czy można przerobić motyw z Twojego tutoriala z WordPressa na swoje i potem używania go na jakiejś stronie możliwe ze komercyjnej?

        Odpowiedz
          Robert 4 marca 2016 o 07:39

          Można brać i robić sobie z nim co dusza zapragnie:) Jedynie z grzeczności proszę zostawić w pliku style.css w sekcji Theme URI adres bloga:)

          Mateusz 5 marca 2016 o 13:18

          Dziekuje za informacje:)

Wiktor 23 maja 2016 o 11:21

Cześć,
czy jest możliwość, aby pop-up otwierał się automatycznie po wejściu na stronę?

Odpowiedz
Dorota 26 maja 2016 o 11:13

Jak sprawić, żeby okienko otwierało się automatycznie po załadowaniu strony a nie poprzez wciśnięcie buttonu? (Tak, jestem totalnie zielona, jeżeli chodzi o programowanie)

Odpowiedz