Jak zamknąć modalne okno bootstrap za pomocą jQuery?

JQuery to bogata w funkcje, łatwa i szybka biblioteka JavaScript, która pomaga manipulować dokumentem HTML w obsłudze zdarzeń, manipulacji, animacji i innych. Mówiąc dokładniej, można go wykorzystać do dodawania okna modelu na stronie internetowej. Ten model jest reprezentowany jako okno wyskakujące lub okno dialogowe wyświetlane u góry bieżącego okna.

Ten post szczegółowo wyjaśni procedurę zamykania okna modalnego bootstrap za pomocą jQuery.

Jak używać jQuery do zamykania modalnego okna bootstrap?

Będziemy rozwinąć wspomniany temat, obejmując następujące kroki:

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

Krok 1: Utwórz modalne okno Bootstrap w HTML

Korzystając z klas modalnych bootstrap, modalne okno można skutecznie tworzyć:

• Najpierw utwórz element przycisku, który uwolni modalny w bootstrap za pomocą atrybutów danych „Data-toggle" I "cel".
• Następnie uczyń okno modalne za pomocą klasy „modalny" I "znikać".
• „„Modal-Dialog”,„Modalny kontent”,„Modalny nagłówek”,„Title modalne”,„-ciało modalne", I "stóp modalny”To klasy, które są zaimplementowane w poniższym kodzie w celu ustalenia elastycznego dialogu modalnego:

Uruchom modalny

Tytuł

-hidden = "true"> ×

Witamy w Linuxhint!

Zamknąć
Ratować

Krok 2: Zamknij okno modalne Bootstrap za pomocą JQuery

Ogólnie rzecz biorąc, atrybut danych „Data-Dismiss”Z wartością„modalny”Jest określony w celu zamknięcia modalnego okna dialogowego. Ten atrybut jest stosowany do elementu przycisku, aby zamknąć okno.

W naszym scenariuszu jesteśmy zainteresowani wdrożeniem JQuery, aby zamknąć okno wyskakujące. Omówmy to z pomocą wdrożenia:

• Po pierwsze, dołącz „”Tag w HTML.
• Określ funkcję $ (), która zwraca identyfikator elementu. Skojarz go z zdarzeniem kliknięcia i podłącz go z funkcją, która wywołuje kliknięcie.
• Wewnątrz funkcji wspomnij o kodzie „$ ('#celcomemodal').Modal („ukryj”)”To oznacza, że ​​identyfikator„WelcomeModal”Będzie ukryte, wykorzystując„Modal („ukryj”)”Funkcja:

Wyjście

W ten sposób możesz zamknąć modalne okno bootstrap za pomocą jQuery.

Wniosek

Aby zamknąć modalne okno Bootstrap za pomocą jQuery, utwórz modalne okno za pomocą klas bootstrap. Zaimplementuj funkcję jQuery „$ ()„Aby uzyskać identyfikator elementu, a następnie skojarzyć„Modal („ukryj”)”Funkcja z nim. Ten zapis ilustruje, jak zaimplementować JQuery, aby zamknąć modalne okno Bootstrap.