Popup-Fenster, auch bekannt als Popup-Fenster, sind eines der effektivsten Werkzeuge, um die Aufmerksamkeit der Benutzer auf Ihrer Website zu erregen. Sie können für verschiedene Zwecke wie Werbung, Benachrichtigung über Rabatte oder Angebote, Abonnieren eines Newsletters, Benachrichtigung über wichtige Ereignisse und vieles mehr verwendet werden.
In diesem Artikel bieten wir detaillierte Anweisungen zum Erstellen von Pop-ups für Ihre Website. Unabhängig von Ihrem Wissen über die Webentwicklung können Sie Popup-Fenster ganz einfach anpassen und für Ihre eigenen Zwecke verwenden.
Schritt 1: Bestimmen Sie den Zweck Ihres Popup-FenstersBevor Sie mit dem Erstellen eines Popup-Fensters beginnen, müssen Sie den Zweck des Popup-Fensters definieren. Was möchten Sie mit diesem Fenster erreichen? Möchten Sie, dass sich Besucher für Ihren Newsletter anmelden, einen Kauf tätigen, eine Bewertung abgeben oder eine Aktion durchführen? Wenn Sie ein Ziel definieren, können Sie den richtigen Inhalt und das richtige Design für Ihr Popup-Fenster auswählen.
Nachdem Sie das Ziel festgelegt haben, können Sie mit der Erstellung des Popup-Fensters selbst beginnen. Sie können CSS und JavaScript verwenden, um ein Popup-Fenster zu erstellen, oder Sie können vorgefertigte Tools und Plugins verwenden, die für verschiedene Plattformen und CMS angeboten werden.
Es ist wichtig sich daran zu erinnern, dass Pop-ups unauffällig und benutzerfreundlich sein müssen. Sie sollten die Benutzererfahrung auf der Website nicht beeinträchtigen und sollten einfach zu bedienen sein. Es lohnt sich auch, sich an die Regeln für das Conversion-Design zu erinnern und effektive Call-to-Action zu verwenden, um die Effizienz Ihres Popup-Fensters zu maximieren.
Wie erstelle ich ein Popup - Detaillierte Anleitung zum Hinzufügen von Popup-Fenstern zu einer Website
Schritt 1: Erstellen Sie HTML-Markup für das Popup-Fenster. Verwenden Sie dazu einen Container mit einer eindeutigen ID, der den Inhalt des Popup-Fensters enthält. Zum Beispiel:
Schritt 2: Fügen Sie dem Popup-Fenster CSS-Stile hinzu. Passen Sie die Positionierung, die Größe, die Hintergrundfarbe und andere Stile nach Ihren Wünschen an. Zum Beispiel:
Schritt 3: Fügen Sie JavaScript-Code hinzu, um das Popup-Fenster zu öffnen und zu schließen. Zum Beispiel:
var popup = document.getElementById('popup'); var closePopup = document.getElementById('close-popup'); function openPopup() < popup.style.display = 'block'; >function closePopup() < popup.style.display = 'none'; >closePopup.addEventListener('click', closePopup);
Schritt 4: Rufen Sie die Funktion openPopup() auf, wenn Sie ein Popup öffnen möchten. Wenn Sie beispielsweise auf eine Schaltfläche oder einen Link klicken:
Jetzt haben Sie eine detaillierte Anleitung zum Hinzufügen von Pop-ups zu Ihrer Website. Befolgen Sie diese Anleitung, um ein effektives und benutzerfreundliches Popup für Ihre Benutzer zu erstellen.
Wählen Sie eine geeignete Bibliothek oder ein Plugin aus
Wenn Sie Pop-ups für Ihre Website erstellen, können Sie bereits fertige Bibliotheken oder Plugins verwenden, die Ihre Aufgabe erheblich vereinfachen. Im Folgenden sind einige beliebte Optionen aufgeführt:
- jQuery Popup Overlay - es ist ein leichtes und einfach zu bedienendes Plugin, mit dem Sie verschiedene Arten von Pop-ups erstellen können. Es bietet eine Vielzahl von Einstellungen, um ein einzigartiges Aussehen und Verhalten von Fenstern zu schaffen.
- Magnific Popup - es ist eine sehr beliebte Bibliothek, mit der Sie auch viele Arten von Popup-Fenstern erstellen können - von normalen modalen Fenstern bis hin zu Bildgalerien und Video-Playern.
- Bootstrap Modal "wenn Sie das Bootstrap-Framework bereits verwenden, ist es für Sie bequem, die Modal-Komponente des Frameworks zum Erstellen von Pop-ups zu verwenden. Es bietet viele vorgefertigte Stile und Optionen, die leicht an Ihre Bedürfnisse angepasst werden können.
Die Auswahl der richtigen Bibliothek oder des Plugins hängt von Ihren spezifischen Anforderungen und Vorlieben ab. Es wird empfohlen, sich mit allen verfügbaren Funktionen und der Dokumentation jedes Werkzeugs vertraut zu machen, um das für Ihr Projekt am besten geeignete auszuwählen.
Verbinden Sie die Bibliothek oder das Plugin mit Ihrer Website
Um Pop-ups auf Ihrer Website zu erstellen, müssen Sie eine Bibliothek oder ein Plugin anschließen, das die gewünschten Funktionen und Funktionen bereitstellt.
Es gibt viele Bibliotheken und Plugins, um Popup-Fenster zu erstellen, und Sie sollten diejenige auswählen, die Ihren Anforderungen und Bedürfnissen am besten entspricht.
- jQuery: Wenn Sie bereits jQuery auf Ihrer Website verwenden, können Sie verschiedene Plugins wie Magnific Popup, Fancybox, Colorbox und andere verwenden.
- Popper.js: Popper.js ist ein JavaScript-Plugin zum Positionieren von Elementen auf einer Seite, einschließlich Pop-ups. Es wird häufig zusammen mit Frameworks wie Bootstrap verwendet.
- Vanilla JavaScript: Wenn Sie lieber mit reinem JavaScript arbeiten möchten, können Sie eine eigene Funktion zum Anzeigen von Popup-Fenstern erstellen.
Eine Bibliothek oder ein Plugin kann über einen externen Link verbunden werden, z. B.:
Oder indem Sie eine Bibliotheks- oder Plug-in-Datei auf Ihren Server hochladen und mit einem Tag verbinden , zum Beispiel:
Stellen Sie sicher, dass Sie die Bibliothek oder das Plugin vor Ihrem eigenen Skript oder Code anschließen, um mit Popup-Fenstern zu arbeiten.
Erstellen Sie HTML-Markup für das Popup-Fenster
Um ein Popup-Fenster auf Ihrer Website zu erstellen, müssen Sie dem Fenster zuerst HTML-Markup hinzufügen. Hier ist ein Beispiel für einfachen HTML-Code, den Sie verwenden können:
Заголовок окна
Текст вашего сообщения
In diesem Beispiel haben wir einen externen div-Container mit der Klasse "popup" und ein internes div mit der Klasse "popup-content". Innerhalb des Popup-Fensters haben wir einen Titel mit dem h3-Tag und einen Textinhalt mit dem p-Tag. Außerdem haben wir eine Schaltfläche "Schließen" mit der Klasse "close-btn" hinzugefügt.
HTML-Markup ist die Grundlage des Popup-Fensters und die nächsten Schritte beinhalten das Hinzufügen von Stilen und Funktionen mit CSS und JavaScript.
Fügen Sie JavaScript-Code hinzu, um das Verhalten des Popup-Fensters zu steuern
Damit ein Popup-Fenster ordnungsgemäß funktioniert, müssen Sie JavaScript-Code hinzufügen, um sein Verhalten zu steuern. Erstellen Sie dazu eine neue Datei mit der Erweiterung .js oder fügen Sie Code zu einer bereits vorhandenen Datei mit JavaScript-Code hinzu. Im Folgenden finden Sie Beispielcode, mit dem Sie ein Popup-Fenster erstellen können:
// Получение ссылки на всплывающее окноvar popup = document.getElementById("popup");// Получение ссылки на кнопку, открывающую всплывающее окноvar openBtn = document.getElementById("openBtn");// Получение ссылки на кнопку, закрывающую всплывающее окноvar closeBtn = document.getElementById("closeBtn");// Добавление обработчика события для открытия всплывающего окнаopenBtn.addEventListener("click", function() );// Добавление обработчика события для закрытия всплывающего окнаcloseBtn.addEventListener("click", function() );Im dargestellten Code geschieht Folgendes:
- Mit der Methode getElementById() es ergibt sich ein Link zu einem Popup-Fenster und Schaltflächen, die es öffnen und schließen.
- Der Schaltfläche zum Öffnen eines Popup-Fensters wird ein Ereignishandler hinzugefügt click, das ein Popup-Fenster anzeigt, indem der Eigenschaftswert festgelegt wird display gleich "block".
- Es wird auch ein Ereignishandler für die Schaltfläche zum Schließen des Popup-Fensters hinzugefügt click, aber bereits mit einem anderen Eigenschaftswert display - "none". Dadurch wird das Popup-Fenster ausgeblendet.
Sie können bei Bedarf die Eigenschaftswerte des Popup-Fensters ändern oder beim Öffnen oder Schließen des Popup-Fensters zusätzliche Aktionen hinzufügen. Sie können den Code auch ändern, um andere Methoden zum Anzeigen von Fenstern zu verwenden.
