Wie man jQuery verwendet, um ein modales Pop-up zu erzeugen, wenn man darauf klickt

Wie man jQuery verwendet, um ein modales Pop-up zu erzeugen, wenn man darauf klickt

Ein modales Feld ist ein Pop-up-Fenster, das den Benutzer zwingt, damit zu interagieren, bevor er zur Website zurückkehrt. Modale Boxen sind nützlich für Warnungen, Informationsboxen und mehr. Sie können ein modales Fenster mit jQuery erstellen. Wenn Sie mit jQuery nicht vertraut sind, finden Sie in unserem Artikel jQuery-Grundlagen eine Erklärung, wie jQuery funktioniert.

Dies ist eine interaktive Codeanzeige, die Ihnen HTML, CSS, jQuery und eine Demo der Ausgabe zeigt.

Modales HTML

Um ein modales Pop-up zu erstellen, müssen Sie zunächst die HTML-Struktur festlegen.

Sie müssen Klassen für das Popup-Overlay und den Popup-Inhalt erstellen, damit Sie sie getrennt vom Rest des Dokuments bearbeiten können.

In diesem Beispiel werden die Klassen „popup-overlay“ und „popup-content“ erstellt, damit CSS die spezifische Gestaltung ermöglicht.

Achten Sie auf die Schaltflächenelemente in diesem Beispiel. Wir haben Schaltflächen hinzugefügt, die das Popup auslösen sollen. Einer Schaltfläche wurde die Klasse „open“ zugewiesen, der anderen die Klasse „close“. Diese werden später verwendet, um das Pop-up zu öffnen und zu schließen.

Modales CSS

Im CSS müssen Sie die Klassen „popup-overlay“ und „popup-content“ so gestalten, dass sie zunächst ausgeblendet sind. Ein Pop-up wäre kein Pop-up, wenn es von Anfang an sichtbar wäre. Wir können das Pop-up ausblenden, indem wir die Sichtbarkeit der Klassen ändern:

.popup-overlay {visibility:hidden;}.popup-content {visibility:hidden;}

Wir wollen nicht, dass das Popup für immer ausgeblendet wird, also müssen wir einen speziellen Anwendungsfall in der CSS erstellen, wann das Popup angezeigt werden soll. Wir werden jQuery verwenden, um zu bestimmen, wann das Pop-up sichtbar sein soll.

jQuery hat die Fähigkeit, Klassen auf der Grundlage von Aktionen (wie Klicken) hinzuzufügen und zu entfernen. Wenn wir also jQuery so programmieren, dass es eine Klasse namens „active“ hinzufügt, wenn die Schaltfläche „open“ angeklickt wird, können wir die Klasse „active“ in CSS verwenden, um das Pop-up anzuzeigen. Hängen Sie die Klasse „active“ an die Pop-up-Klassen an und erstellen Sie ein neues Styling für die Sichtbarkeit des Pop-ups.

Im folgenden Beispiel sehen Sie, wie dieses CSS-Styling aussehen sollte:

.popup-overlay.active{visibility:visible;}.popup-content.active {visibility:visible;}

Modal jQuery

Jetzt ist es an der Zeit, die jQuery hinzuzufügen. Achten Sie darauf, Ihr HTML-Dokument für jQuery einzurichten, bevor Sie jQuery-Code hinzufügen. Wenn Sie sich nicht sicher sind, wie das geht, lesen Sie unseren Artikel Getting Your HTML Ready for jQuery.

Wenn also die HTML-Schaltflächen „Öffnen“ und „Schließen“ angeklickt werden, muss jQuery die Klasse „active“ hinzufügen oder entfernen.

Diese erste Anweisung fügt die Klasse „active“ hinzu, wenn die Schaltfläche „Open“ angeklickt wird.

$(".open").on("click", function(){$(".popup, .popup-content").addClass("active");});

Wenn dies geschieht, wird die Klasse „active“ an die Popup-Klassen angehängt, wodurch die Sichtbarkeit des Popups auf „visible“ geändert wird. Mit anderen Worten, das Popup erscheint.

Diese zweite Anweisung entfernt die Klasse „active“, wenn die Schaltfläche „Close“ angeklickt wird.

$(".close, .popup").on("click", function(){$(".popup, .popup-content").removeClass("active");});

Wenn dies geschieht, wird die Klasse „active“ aus den Popup-Klassen entfernt, wodurch sie zu ihrem vorherigen Styling zurückkehren, bei dem die Sichtbarkeit auf „hidden“ gesetzt ist.

Fügen Sie beide jQuery-Anweisungen zu Ihrem Dokument hinzu. Wenn dies alles korrekt ausgeführt wird, haben Sie ein rudimentäres modales Popup-Fenster.