So schließen Sie ein Bootstrap -Modalfenster mit JQuery?

JQuery ist eine featurereiche, einfache und schnelle JavaScript-Bibliothek, mit der das HTML-Dokument bei der Handhabung, Manipulation, Animation und mehr zu manipulieren kann. Insbesondere kann es zum Hinzufügen des Modellfensters auf einer Webseite verwendet werden. Dieses Modell wird als Popup-Fenster oder Dialogfeld dargestellt, das oben im aktuellen Fenster angezeigt wird.

Dieser Beitrag erläutert speziell das Verfahren, um ein Bootstrap -Modalfenster mit JQuery zu schließen.

So verwenden Sie JQuery, um ein Bootstrap -Modalfenster zu schließen?

Wir werden das erwähnte Thema näher erläutern, indem wir die folgenden Schritte behandeln:

• Schritt 1: Erstellen Sie Bootstrap -Modalfenster in HTML
• Schritt 2: Schließen Sie das Bootstrap -Modalfenster mit JQuery

Schritt 1: Erstellen Sie Bootstrap -Modalfenster in HTML

Durch die Verwendung der Bootstrap -Modalklassen kann das modale Fenster effizient erstellt werden:

• Erstellen Sie zunächst ein Schaltflächenelement, das das Modal in Bootstrap mithilfe der Datenattribute auslöst. “Data-Toggle" Und "Datenziel”.
• Machen Sie dann das modale Fenster mit der Klasse “modal" Und "verblassen”.
• Der "Modal-Dialog","Modal-Inhalt","Modal-Header","Modal-Title","Modal-Körper", Und "Modal-Footer”Sind die Klassen, die im unten erwähnten Code implementiert werden, um ein flexibles modales Dialogfeld festzulegen:

Modal starten

Titel

-Hidden = "true"> ×

Willkommen bei LinuxHint!

Schließen
Speichern

Schritt 2: Schließen Sie das Bootstrap -Modalfenster mit JQuery

Im Allgemeinen das Datenattribut “Data-Dismiss"Mit dem Wert"modal”Wird angegeben, um das modale Dialogfeld zu schließen. Dieses Attribut wird auf das Schaltflächenelement angewendet, um das Fenster zu schließen.

In unserem Szenario sind wir an der Implementierung von JQuery interessiert, um das Popup -Fenster zu schließen. Lassen Sie uns damit mit Hilfe der Implementierung besprechen:

• Zunächst einschließen die “”Tag in HTML.
• Geben Sie die Funktion $ () an, die die ID des Elements zurückgibt. Verbinden Sie es mit dem Klickereignis und verbinden Sie es mit der Funktion, die auf Klick aufgerufen wird.
• In der Funktion erwähnen Sie den Code “$ ('#Welcomemodal').Modal ('Hide')"Das bedeutet, dass die ID"Welcomemodal"Wird versteckt sein, indem er die nutzt"Modal ('Hide')Funktion:

Ausgang

Auf diese Weise können Sie mit JQuery ein Bootstrap -Modalfenster schließen.

Abschluss

Erstellen Sie ein modales Fenster mit den Bootstrap -Klassen zum Schließen eines Bootstrap -Modalfensters mit JQuery. Implementieren Sie die JQuery -Funktion “$ ()”Um die ID des Elements zu erhalten und dann die“ zu assoziieren “Modal ('Hide')Funktionieren Sie damit. In diesem Artikel wurde veranschaulicht, wie JQuery implementiert wird, um ein Bootstrap-Modalfenster zu schließen.