Modalny to okno dialogowe lub okno wyskakujące, które służy do przekazywania użytkownikowi ważnych informacji przed podjęciem jakichkolwiek działań lub pójścia dalej na stronie internetowej. Zasadniczo Modki Bootstrap 5 są używane do przekazywania informacji takich jak sesja lub pojawia się, gdy użytkownik próbuje coś usunąć lub zaktualizować. Ponadto jest wykorzystywany do celów potwierdzających lub do pokazywania ukrytej treści na żądanie.

Ten artykuł jest o

• Jak utworzyć modat w Bootstrap 5?
• Podstawowy modalny
• Dodaj animację do modelu
• Rozmiary modalne
• Modalny wyśrodkowany
• Modal na pełny ekran
• Responsywny modalny na pełny ekran
• Przewijanie modalne

Jak stworzyć modal

Aby utworzyć modalny, najpierw stwórz div z .modalny klasa wraz z jej unikalnym ID następnie owinąć tę div wokół div z .Modal-Dialog klasa, wewnątrz tego div Stwórz kolejną div z .Modalny kontent klasa i wewnątrz .Modalny kontent div Utwórz jeszcze trzy divy z .Modalny nagłówek, .-ciało modalne, .stóp modalny zajęcia.

.Modalny nagłówek Div zawiera tytuł modelu i jego zwolnienie.

.-ciało modalne Div zawiera główną zawartość przy modelu.

.stóp modalny Div zawiera przyciski sterowania modal.

Podstawowy modalny

Aby utworzyć podstawowy modal, utwórz div, który używa .modalny klasa z unikalnym ID Po tym owinąć tę div wokół Divów zawierających .Modal-Dialog, .Modalny kontent, .Modalny nagłówek, .-ciało modalne I .stóp modalny Zajęcia, jak pokazano w przykładzie.

Dodaj kategorie

Ten modalny przykład służy do dodawania kategorii

Otwarty modal

Kategorie

Dodać
Zamknąć

W ten sposób powstaje podstawowy model.

Dodaj animację do modelu

Aby dodać animację do użytku modalnego .znikać klasa z .modalny klasa:

…

W ten sposób stosuje się animację FADE na modat.

Bez animacji

Usunąć .znikać klasa, aby otworzyć modal bez animacji.

…

Tak wygląda modal bez animacji.

Rozmiary modalne

Modały mogą mieć trzy rozmiary:

• Mały
• Duży
• Bardzo duży

Mały modalny

Aby stworzyć mały modal, .Modal-SM Klasa jest używana:

…

W ten sposób powstaje mały modal.

Duży modalny

Aby stworzyć duży modal, .Modal-lg Klasa jest używana:

…

W ten sposób powstaje duży modal.

Bardzo duży modalny

Aby stworzyć bardzo duży modal, .modal-xl Klasa jest używana:

…

W ten sposób tworzy się bardzo duży modal.

Modki pełnego ekranu

Jeśli chcesz, aby Twój modal pojawił się na pełnym ekranie, użyj .Modal-FullScreen klasa z .Modal-Dialog klasa.

…

W ten sposób tworzy się modal na pełny ekran.

Responsywne modalne modele

Możemy również kontrolować, gdy modal będzie pokazał jako modal na pełny ekran. W tym celu użyj następujących klas jako wymagania.

• .Modal-FullScreen-Sm-Down Ta klasa pokazuje modal na pełny ekran, gdy rozmiar ekranu jest poniżej 576px.
• .Modal-FullScreen-Md-Down Ta klasa pokazuje modal na pełnym ekranie, gdy rozmiar ekranu jest poniżej 768px.
• .Modal-FullScreen-LG-Down Ta klasa pokazuje modal na pełny ekran, gdy rozmiar ekranu jest poniżej 992px.
• .Modal-FullScreen-XL-Down Ta klasa pokazuje modal na pełnym ekranie, gdy rozmiar ekranu jest poniżej 1200px.
• .Modal-FullScreen-xxl-Down Ta klasa pokazuje modal na pełny ekran, gdy rozmiar ekranu jest poniżej 1400px.

Modalny wyśrodkowany

Używać .zorientowany na modal-dialog klasa z .Modal-Dialog Aby pokazać modalne pionowo i poziomo w środku strony.

…

Przewijanie modalne

Scroll pasek jest automatycznie dodawany do strony, gdy zawartość w modelu jest duża.

Więc nie jest to dobre podejście do przewijania całej strony zamiast przewijania modelu tylko w celu rozwiązania tego problemu, dodaj klasę .Modal-DiaLog-scrolleble z .Modal-Dialog klasa, aby uczynić modalny przewijał

…

Spójny modal jest pomyślnie tworzony i działa doskonale dobrze.

Wniosek

Modalny jest tworzony za pomocą .modalny klasa, która owija się wokół innych Divów zawierających .Modal-Dialog, .Modalny kontent, .Modalny nagłówek, .-ciało modalne, .stóp modalny . Powyższy artykuł przedstawia podstawową strukturę modelu bootstrap 5 z nagłówkiem, korpusem i stopą, które zawierają przyciski akcji dla użytkownika. Ponadto prezentuje różne typy modalne, takie jak rozmiary modalne, modaty z animacją lub bez, środkowymi modalami i responsywnymi modalami na pełnym ekranie.