#56. JavaScript – Modal

Pierwszy modal

Modal to okienko pojawiające się na pierwszym planie, w którym można umieścić ważne informacje, których użytkownik nie ma przegapić. Uruchamiany jest standardowo przez kliknięcie w element button. Jeżeli chcesz skorzystać z tego komponentu, musisz dodać bootstrapowe skrypty JavaScript!

Do czego możesz wykorzystać ten komponent? Najczęstszym zastosowaniem jest po prostu przekazanie ważnej informacji dla użytkownika, np. zapisanie się do newslettera lub zareklamowanie produktu klientowi.

Poniżej dodaje przykład w którym zobaczysz zastosowanie modalu:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

sweet-dream-uv7s1

sweet-dream-uv7s1 danielminschinski

Opcje dla modala

Wiesz już jak stworzyć modal, teraz w tym ćwiczeniu zajmiesz się wykorzystywaniem parametrów dla tego komponentu. Atrybuty dodajemy do przycisku, który otwiera modala!
Dzięki atrybutowi data-keyboard możemy zmienić to, czy modal można będzie wyłączyć za pomocą przycisku Esc na klawiaturze – domyślnie ta opcja jest włączona.
Ciekawe jest także zastosowanie atrybutu data-backdrop. Jeżeli zmienimy jego wartość na false, to będziemy mogli wyłączyć modala tylko za pomocą przycisku na dole komponentu lub x w prawym górnym rogu (możliwe jest też wyłączenie przyciskiem Esc, jeżeli nie zostało to wcześniej wyłączone).

Spójrz na poniższy przykład z zastosowaniem powyższego rozwiązania:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

elastic-robinson-z15z3

elastic-robinson-z15z3 danielminschinski

Z powyższym materiałem dodasz modal. Jest to ciekawy sposób prezentacji danego tekstu, grafiki, itp. Jak zwykle polecam zapoznać się z oficjalną dokumentacją Bootstrapa aby poznać wiele więcej możliwości komponentu.

W następnym materiale poznasz taby – czyli dynamiczne zawartości zakładek.

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb.

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!