Jak otworzyć modalne okno Bootstrap za pomocą JQuery?

Modki bootstrap zapewniają elastyczne i responsywne wyskakujące okienko JavaScript, które służy do wyświetlania zdjęć, filmów i alertów na stronie internetowej. Znajdują się nad treścią dokumentu. Jednak Bootstrap obsługuje tylko jeden modalny na raz. Możemy korzystać z jQuery na różne sposoby z bootstrap dla wtyczek JavaScript, takich jak podpowiedzi, modaty i inne.

Ten zapis ilustruje, jak uruchomić modat bootstrap za pomocą jQuery.

Jak otworzyć modalne okno Bootstrap za pomocą JQuery?

JQuery to prosta, lekka biblioteka JavaScript używana do różnych celów wraz z stronami internetowymi JavaScript. Aby otworzyć modat bootstrap za pomocą JQuery, przejrzyj wymienione kroki:

• Krok 1: Utwórz modalne okno Bootstrap w pliku HTML
• Krok 2: Otwórz modalne okno Bootstrap za pomocą JQuery

Krok 1: Utwórz modalne okno Bootstrap w pliku HTML

Zaimplementuj następujący fragment kodu w pliku HTML, aby utworzyć dialog modalny:

• Najpierw utwórz przycisk, który pomoże uruchomić okno modalne w tym celu, skorzystaj z „”Tag.
• Następnie dodaj „„Element z„modalny" I "znikać„Zajęcia, aby utworzyć modalne okno.
• Dostosuj okno dialogowe, wykorzystując „Modal-Dialog„Klasa bootstrap. Następnie udaj się, aby przydzielić treść, określając klasę „Modal-Content” w oddzielnym kontenerze „Div”.
• W „„Modalny nagłówek”, Zdefiniuj tytuł i przycisk zamknięcia w prawym rogu. Po kliknięciu okno modalne jest zamknięte. Ta funkcja ma miejsce za pomocą atrybutu „Data-Dismiss". Ikona bliskiej jest następnie wykonana za pomocą „×".
• Następnie użyj klasy „Modal-Body” w innych „div” używanych do określania treści modalnej.
• Na końcu sekcji ciała utwórz dwa przyciski w części stopki, aby dodać „anulować" I "ratować”Opcje:

Uruchom modalny

Tytuł

×

Witamy w Linuxhint!

Anulować
Ratować

Można zaobserwować, że nie pojawia się modal:

Krok 2: Otwórz modalne okno Bootstrap za pomocą JQuery

W „„„Tagi, określ kod jQuery, jak zaimplementowano poniżej:

Poniżej znajduje się opis wyżej wymienionego kodu jQuery:

• „„$ ()”Jest skrótem metody getElementById () i zwraca identyfikator określonego elementu.
• ".na kliknięcie')”To funkcja, która generuje zdarzenie czasu działania przy kliknięciu. Na przykład opisaliśmy to, gdy przycisk z identyfikatorem „Modal startowy”Jest kliknięte, powołana zostanie określona funkcja.
• „Funkcja ()” służy do wdrażania funkcji w JavaScript. Podana funkcja przyjmie identyfikator „#welcomemodal”Modalnego okna i kojarzyć je z jQuery„Modal („show”)”Funkcja
• Wyżej wymieniony kod oznacza, że ​​funkcja wyświetli okno modalne na przycisku Kliknij:

Z powodzeniem skompilowaliśmy kod jQuery, aby otworzyć okno Bootstrap Modal.

Wniosek

Aby otworzyć okno modalne Bootstrap za pomocą JQuery, najpierw napisz kod HTML dla modalnego okna. Następnie wdrożyć funkcje jQuery. JQuery „Modal („show”)”,„Modal („ukryj”)", I "Modal („przełącz”)”Funkcje są używane do okna dialogowego okna modalnego Bootstrap. Ten zapis ilustruje procedurę uruchomienia okna modalnego bootstrap z jQuery.