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.

Uruchom okienko Pop-Up

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.

Duże okienko pop-up

Małe okienko pop-up

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

---

Post się przydał? Oceń go proszę.

(11 głosów, średnia: 5,00 na 5)

Loading...

---

← Starszy post
Widoczność elementów na różnych urządzeniach / Responsive utilities
Nowszy post →
Akordeon / Collapse

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

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

Robert 2 lutego 2016 o 07:56

Zachęcam do zapoznania się z postem -> https://kursbootstrap.pl/wprowadzenie-do-bootstrap/ :)

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

kuba 26 czerwca 2017 o 22:34

Wywołać modala przez script (jest na stronie bootsrapa) a następnie ustawić parametr ‚show” i umieścić ten script pod podanym modalem na stronie

Odpowiedz