Bootstrap | Wtyczka modalna

Komponent modalny Bootstrap to okno dialogowe, które pojawia się na ekranie. Zawiera treść, taką jak tytuł, tekst, przyciski itp. Jest przyjazny dla użytkownika i elastyczny do wyświetlania treści w aplikacji internetowej. Dodatkowo możesz zmienić jego wygląd, aby pasował do stylu aplikacji.

Ten pismo poprowadzi Cię o:

• Co to jest wtyczka modalna?
• Jak utworzyć modat w bootstrapie?
• Jak dostosować rozmiar modalny w bootstrapie?

Co to jest wtyczka modalna?

Modalna wtyczka używa JavaScript lub danych danych do otwierania lub ukrycia zawartości w razie potrzeby. Mówiąc dokładniej, jest to okno dialogowe lub wyskakujące okno wyświetlane u góry strony.

Jak utworzyć modat w bootstrapie?

Aby utworzyć modalny w bootstrap, wykonaj wspomniane kroki.

Krok 1: Utwórz przycisk, aby uruchomić modal

Najpierw utwórz przycisk, który uruchamia okno modalne za pomocą elementów przycisku lub łącza. Główne atrybuty używane w tym elemencie to „Data-toggle" I "cel". Aby to zrobić, sprawdź następujące instrukcje:

• Element przycisku jest tworzony za pomocą „Btn”,„BTN-Primary", I "Btn-lg„Zajęcia.
• Określić "Data-toggle”Atrybut, który otwiera okno modalne.
• "cel”Wskazuje na identyfikator modalu.

Oto kod HTML:

Otwarty modal

Wyjście

Krok 2: Utwórz okno modalne

Okno modalne jest tworzone przez wykonanie kroków:

• Dodać "„Element i przypisz go identyfikator. Ten identyfikator musi pasować do „cel„Wartość atrybutu. W naszym przypadku, "Demomodal”Jest określony jako identyfikator kontenera.
• "modalny”Klasa podkreśla i rozpoznaje treść Div za modal.
• "znikać„Klasa stosuje efekt przemiany z zanikania i zanikania do modalnego okna. Możesz łatwo usunąć tę klasę, jeśli nie chcesz.
• "Modal-Dialog„Klasa dostosowuje szerokość i margines okna dialogowego modalnego. Treść modalna jest określona w utworzonym kontenerze.

Oto wdrożenie wyżej wymyślonego scenariusza:

Krok 3: Określ treść modalną

Treść modelu jest określona w kontenerze Div o klasie „Modal-Dialog". Poniższe kroki są wdrażane, aby dodać do niej zawartość:

• Najpierw dodaj „„Element z klasą”Modalny kontent".
• W środku stwórz nagłówek, nadwozie i stopkę za pomocą klas „Modalny nagłówek”,„-ciało modalne", I "stóp modalny".
• W nagłówku określ przycisk zamknięcia i tytuł za pomocą „Title modalne" klasa.
• Następnie określ część ciała, wykorzystując ”-ciało modalne" klasa.
• Po nagłówku i nadwozie stwórz stopkę, stosując „stóp modalny" klasa. Część stopowa zawiera przycisk, który zamyka modalne okno:

×

Linuxhint

Linuxhint to najlepsza strona internetowa samouczka.

Wyjście

Jak dostosować rozmiar modalny w bootstrapie?

Rozmiar modalnego okna można określić za pomocą „modalny-*„Klasa, gdzie gwiazdka”*”Symbol wskazuje rozmiar modalnego okna.

Małe modalne okno

W poniższym przykładzie „„Element mający klasę”Modal-Dialog”Przypisany jest klasa„Modal-SM”:

W rezultacie okno modalne otworzy się w niewielkim rozmiarze:

Duże modalne okno

Teraz klasa „Modal-lg”Określono, aby otworzyć okno modalne w dużym rozmiarze:

Wyjście

To wszystko o modalnej wtyczce.

Wniosek

Aby utworzyć modalny w bootstrap, najpierw utwórz przycisk lub link, który uruchomił Modal. Następnie utwórz okno modalne za pomocą klasy „modalny" I "Modal-Dialog". Wewnątrz kontenera określ treść modelu za pomocą „Modalny kontent". Użyj „Title modalne”,„-ciało modalne", I "stóp modalny„Zajęcia, aby dodać tytuł modelu, ciało modalne i stopę modal. Ten post wyjaśnił, czym jest wtyczka modalna i jak ją utworzyć.