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:
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:
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.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA