Jak stylizować modalny modat bootstrap

Wzienne okno odnosi się do małego okna na ekranie istniejącego okna. Jest wykorzystywany do wyświetlania dodatkowych lub nowych informacji w dowolnej aplikacji. Czasami jest to również znane jako reklama. Bootstrap zapewnia wiele klas, które pomagają łatwo tworzyć modalne okna. Jednak za pomocą CSS okno modalne można zaprojektować zgodnie z Twoimi upodobaniami.

Ten zapis opisze, jak stylizować modal bootstrap.

Jak stylizować modalny modat bootstrap?

Aby dowiedzieć się, jak stylizować modal bootstrap, wykonaj poniższe kroki.

Krok 1: Utwórz plik HTML

Najpierw utwórz modal, postępując zgodnie z instrukcjami podanymi poniżej:

• Stwórz "”Pojemnik i przypisz go klasę„Container główny".
• Następnie dodaj przycisk, który uwolni okno modalne. Przypisz to „Btn”,„BTN-Primary", I "show-modal„Zajęcia. Ustaw atrybuty danych „Data-toggle”Z wartością„modalny”I„ „cel”Z„#Mymodal" wartość. Ten identyfikator wskazuje na identyfikator modalnego okna.
• Następnie utwórz okno modalne. Aby to zrobić, dodaj „”Element i przypisz to„modalny" I "znikać„Zajęcia i ustawiaj identyfikator.
• Dodać "”W przypadku okna dialogowego modelu i przypisz go„Modal-Dialog" klasa.
• Następnie określ treść modelu w „” i przypisz ją do klasy „Modalny kontent".
• Zrób przycisk zamknięcia z klasą „zamknąć". „„Data-Dismiss„Atrybut jest wykorzystywany do zamykania okna modalnego.
• Następnie określ korpus modalny z klasami „-ciało modalne" I "wiersz". Wewnątrz weź kolumnę 6 siatek dla obrazu i 6 dla treści.
• Obraz jest osadzony za pomocą „”Tag.
• Następnie w „„„Element z„treść„Klasa, dodaj tytuł, napis i opis.
• Następnie umieść przycisk z bootstrapem „Btn”,„Niebezpieczeństwo BTN", I "P-2„Zajęcia:

Zobacz modalny




×

Oferta specjalna

20% zniżki na wynos i dostawa

Koszule najlepszej jakości. Każdy rozmiar jest dostępny. Łatwo się zmyć.

ZOBACZ WIĘCEJ

Krok 2: Stylowa klasa „moda-modal-container”

Cały pojemnik jest stylizowany z CSS ”rodzina czcionek" nieruchomość:

.container główny
Font-family: „Poppins”, bez Serif;

Krok 3: Stylowa klasa „show-modal”

„„show-modal„Klasa jest zadeklarowana z następującymi właściwościami:

.Container główny .show-Modal
kolor: #fff;
kolor tła: #3A97C9;
Tekst-transform: kapitalizacja;
Wyściółka: 10px 15px;
Margines: 80px Auto 0;
Blok wyświetlacza;

Tutaj:

• "kolor”Ustawia kolor czcionki.
• "kolor tła”Ustawia kolor tła elementu.
• "Tekst-transform”Kapitalizuje tekst.
• "wyściółka„Dostosowuje przestrzeń wokół treści elementu.
• "margines”Produkuje przestrzeń wokół elementu.
• "wyświetlacz”Z wartością„blok”Ustawia szerokość elementu na 100%.

Krok 4: Stylowa klasa „modal-dialog” na Fade

.modalny.znikać .modal-dialog
Transform: Scale (0);
Przejście: wszystkie 450 ms sześcienne (.47, 1.64, .41, .8);

Kiedy modal zanika, do „do„Modal-Dialog" klasa:

• "przekształcać„Nieruchomość z„skala()„Wartość zwiększa lub zmniejsza rozmiar elementu pionowo lub poziomo.
• "przemiana”Stopniowo porusza element. „„Cubic-Bezier ()”Funkcja stosuje sześcienną krzywą Beziera. Jest to określone przez cztery punkty.

Krok 5: Stylowa klasa „modal-dialog” na pokazie

.modalny.pokazywać .modal-dialog
transformacja: skala (1);

CSS „przekształcać„Własność o wartości”skala (1)”Zwiększa rozmiar okna dialogowego.

Krok 6: Style „Modal-Content” klasa

.Container główny .Modal-Dialog .Modal-Content
Radiusz graniczny: 30px;
Border: Brak;
Olflow: ukryty;

„„Modalny kontent”Jest ozdobiony następującymi właściwościami:

• "Radiusz graniczny„Zaokrągla krawędzie elementu.
• "granica”Z wartością„nic„Ukrywa granicę.
• "przelewowy„Kontroluje przepływ treści.

Krok 7: Stylowa klasa „blisko”

.Container główny .Modal-Dialog .Modalny kontent .zamknąć
Kolor: #747474;
kolor tła: RGBA (255, 255, 255, 0.5);
Wysokość: 27px;
szerokość: 27px;
Wyściółka: 0;
Krycie: 1;
Olflow: ukryty;
Pozycja: absolutna;
Racja: 15px;
TOP: 15px;
z-index: 2;

Tutaj:

• "nieprzezroczystość”Definiuje poziom przejrzystości elementu.
• "pozycja”Z wartością„absolutny”Ustawia pozycję elementu w stosunku do jego pozycji nadrzędnej.
• "Prawidłowy" I "szczyt”Ustaw miejsce po prawej i górnej części przycisku zamknięcia.
• "z-index”Określa kolejność stosu elementu. Większe kolejność stosu przenosi element do przodu.

Krok 8: Style „Modal-Body” klasa

.Container główny .Modal-Dialog .Modalny kontent .Modal-Body
Wyściółka: 0 !ważny;

Przestrzeń wokół całego korpusu modalnego jest regulowana przez CSS ”wyściółka" nieruchomość. Co więcej, „!ważny„Słowo kluczowe jest wykorzystywane do przyniesienia znaczenia elementu.

Krok 9: Element stylu „IMG”

.Container główny .Modal-Dialog .Modalny kontent .-ciało modalne .Modal-Image IMG
Wysokość: 100%;
szerokość: 100%;

Krok 10: Styl klasę „treści”

.Container główny .Modal-Dialog .Modalny kontent .-ciało modalne .treść
Wyściółka: 35px 30px;

Korzystając z „wyściółka„Nieruchomość, przestrzeń jest dodawana wokół„treść„Treść klasy.

Krok 11: Stylowa klasa „tytułu”

.Container główny .Modal-Dialog .Modalny kontent .-ciało modalne .tytuł
Kolor: #FB3640;
Font-Family: „Sacramento”, kursywna;
Rozmiar czcionki: 35px;

Tutaj:

• "rodzina czcionek„Definiuje styl czcionki.
• "rozmiar czcionki”Ustawia rozmiar czcionki.

Krok 12: Stylowa klasa „sub-tytle”

.Container główny .Modal-Dialog .Modalny kontent .-ciało modalne .Podpis
czcionek: 600;
TEXT-TRANSFORM: UpperCase;
Margines: 0 0 20px;
Blok wyświetlacza;

Według danego fragmentu kodu:

• "grubość czcionki”Ustawia grubość czcionki.
• "Tekst-transform”Ustawia obudowę czcionki.

Wyjście

W ten sposób możesz stylizować modal bootstrap.

Wniosek

Aby stylizować okno modalne Bootstrap, najpierw dodaj przycisk, który uruchomi modal. Następnie wykonaj modalne okno za pomocą elementów HTML. Następnie dodaj kilka właściwości CSS, w tym „wyściółka”,„margines”,„kolor”,„przemiana”I wiele innych, aby stylizować modalne okno. Mówiąc dokładniej, „Cubic-Bezier”Funkcja służy do zastosowania efektu przejścia w krzywej czterech punktów w oknie modalnym. Ten post wyjaśnił procedurę stylizowania modelu bootstrap.