autor: Robert
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ę:)
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
.
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
Zachęcam do zapoznania się z postem -> https://kursbootstrap.pl/wprowadzenie-do-bootstrap/ :)
OdpowiedzJak 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