So öffnen Sie ein Bootstrap -Modalfenster mit JQuery?

Bootstrap-Modale bieten ein flexibles und reaktionsschnelles JavaScript-Pop-up, mit dem Bilder, Videos und Warnungen auf einer Website angezeigt werden. Sie befinden sich über dem Dokumentinhalt. Bootstrap unterstützt jedoch nur ein einzelnes Modal gleichzeitig. Wir können JQuery auf verschiedene Weise mit Bootstrap für JavaScript -Plugins wie Tooltips, Modale und mehr verwenden.

In diesem Artikel wird veranschaulicht, wie ein Bootstrap-Modal mit JQuery gestartet wird.

So öffnen Sie ein Bootstrap -Modalfenster mit JQuery?

JQuery ist eine einfache, leichte JavaScript -Bibliothek, die für verschiedene Zwecke zusammen mit JavaScript -Webseiten verwendet wird. Um ein Bootstrap -Modal mit JQuery zu öffnen, gehen Sie die aufgeführten Schritte durch:

• Schritt 1: Erstellen Sie das Modalfenster des Bootstrap -Modals in der HTML -Datei
• Schritt 2: Öffnen Sie das Modalfenster des Bootstraps mit JQuery

Schritt 1: Erstellen Sie das Modalfenster des Bootstrap -Modals in der HTML -Datei

Implementieren Sie den folgenden Code -Snippet in der HTML -Datei, um ein modales Dialogfeld zu erstellen:

• Erstellen Sie zunächst eine Schaltfläche, mit der das modale Fenster für diesen Zweck ausgelöst werden kann. Verwenden Sie das “" Schild.
• Dann fügen Sie eine "hinzu"”Element mit dem“modal" Und "verblassenKlassen zum Erstellen eines modalen Fensters.
• Passen Sie das Dialogfenster an, indem Sie die “verwendenModal-Dialog”Bootstrap -Klasse. Gehen Sie anschließend auf, um den Inhalt zuzuweisen, indem Sie die Klasse „Modal-Incontent“ in einem separaten „DIV“ -Container angeben.
• Innerhalb der "Modal-HeaderDefinieren Sie den Titel und eine Schließung an der rechten Ecke. Beim Klicken ist das Modalfenster geschlossen. Diese Funktion findet mit dem Attribut statt. “Data-Dismiss”. Das Schließungssymbol wird dann mit der "die" hergestellt "×”.
• Verwenden Sie als Nächst.
• Erstellen Sie am Ende des Körperabschnitts zwei Schaltflächen im Fußzeilenteil zum Hinzufügen “stornieren" Und "speichern" Optionen:

Modal starten

Titel

×

Willkommen bei LinuxHint!

Stornieren
Speichern

Es kann beobachtet werden, dass kein Modal aufgetaucht ist:

Schritt 2: Öffnen Sie das Modalfenster des Bootstraps mit JQuery

Innerhalb der "Tags, geben Sie den nachstehend implementierten JQuery -Code an:

Im Folgenden finden Sie die Beschreibung des oben angegebenen JQuery-Code:

• Der "$ ()Ist die Abkürzung der GetelementById () -Methode und gibt die ID des spezifischen Elements zurück.
• “.auf ('klicken')Ist eine Funktion, die ein Laufzeitereignis auf Klick generiert. Zum Beispiel haben wir das beschrieben, wenn die Schaltfläche mit der ID “StartmodalKlickt, die angegebene Funktion wird aufgerufen.
• Das "function ()" wird verwendet, um Funktionen in JavaScript zu implementieren. Die angegebene Funktion nimmt den ID an “#Welcomemodal"Des modalen Fensters und verknüpfen Sie es mit der JQuery"Modal ('Show')”Funktion
• Der oben genannte Code bedeutet, dass die Funktion das Modal-Fenster auf der Schaltfläche Klicken Sie auf: Klicken Sie auf: Klicken Sie auf:

Wir haben den Jquery -Code erfolgreich zusammengestellt, um das Bootstrap -Modalfenster zu öffnen.

Abschluss

Um ein Bootstrap -Modalfenster mit JQuery zu öffnen, schreiben Sie zuerst den HTML -Code für das Modal -Fenster. Implementieren Sie danach die JQuery -Funktionen. Die jQuery "Modal ('Show')","Modal ('Hide')", Und "Modal ('Toggle')Funktionen werden für das Bootstrap -Modal -Fenster -Dialogfeld verwendet. Diese Beschreibung hat das Verfahren zum Starten eines Bootstrap-Modalfensters mit JQuery veranschaulicht.