Popup Fenster sie sind ein effektives Werkzeug, um mit Benutzern zu interagieren und ihre Aufmerksamkeit auf bestimmte Elemente oder Informationen auf einer Webseite zu lenken. Diese Fenster, die über dem Hauptinhalt einer Seite erscheinen, können verwendet werden, um zusätzliche Inhalte, Benachrichtigungen, Feedback-Formulare und sogar Anzeigen anzuzeigen.
Das Erstellen eines Popup-Fensters mit HTML, CSS und JavaScript ist auch für diejenigen verfügbar, die gerade erst mit dem Erlernen der Webentwicklung beginnen. Der Erstellungsprozess umfasst mehrere Schritte: Definieren der HTML-Struktur eines Fensters, Hinzufügen von Stilen mit CSS und Hinzufügen von Interaktivität mit JavaScript.
Mithilfe der HTML-Struktur des Fensters wird eine Grundlage für die Anzeige des Inhalts in einem Popup erstellt. Das Markup kann einen Titel, Textinhalt, Schaltflächen und andere Elemente enthalten, je nachdem, was Sie im Fenster anzeigen möchten. Sie können beispielsweise ein einfaches Fenster mit der Überschrift "Willkommen" und der Schaltfläche "Schließen" erstellen.
Fügen Sie dann die Stile mithilfe von CSS hinzu, um das Erscheinungsbild des Popup-Fensters zu bestimmen. Dazu gehören das Ändern der Fenstergröße, das Verwenden von Farben und Schriftarten, das Hinzufügen von Animationen beim Öffnen oder Schließen eines Fensters und vieles mehr. Mit CSS können Sie ein Popup-Fenster erstellen, das dem Gesamtdesign Ihrer Website entspricht oder es einzigartig macht.
Schließlich ermöglicht das Hinzufügen von Interaktivität mit JavaScript das Öffnen und Schließen des Popup-Fensters nach Belieben. Sie können JavaScript verwenden, um die Klickereignisse einer Schaltfläche oder eines Links zu verfolgen, um ein Fenster zu öffnen, und um beim Öffnen und Schließen eines Fensters Animationen oder andere Effekte hinzuzufügen. JavaScript kann auch verwendet werden, um mit dem Benutzer zu interagieren, z. B. um ein Feedback-Formular zu überprüfen oder Daten an den Server zu senden.
Was ist ein Popup-Fenster?
Ein Popup-Fenster wird mit HTML, CSS und JavaScript erstellt. HTML wird verwendet, um den Inhalt eines Fensters zu markieren, CSS, um das Fenster zu stylen, und JavaScript, um Interaktivität hinzuzufügen und die Anzeige des Fensters zu steuern.
Ein Popup-Fenster kann durch verschiedene Ereignisse wie Klicken auf eine Schaltfläche oder einen Link, Bewegen des Mauszeigers, Zeitverzögerung usw. angezeigt werden. Normalerweise wird ein Popup-Fenster über dem Hauptinhalt in der Mitte des Bildschirms oder neben dem Element angezeigt, von dem es aufgerufen wird.
Die Interaktion mit einem Popup-Fenster kann über Schaltflächen, Textfelder, Checkboxen und andere Formularelemente erfolgen. Bei Bedarf kann ein Popup-Fenster über eine Schaltfläche zum Schließen oder ein anderes Ereignis geschlossen werden, z. B. durch einen Klick an einer beliebigen Stelle außerhalb des Fensters.
Es ist wichtig, sich daran zu erinnern, dass Popup-Fenster für Benutzer lästig sein können, daher sollten sie mit Bedacht verwendet werden und den Richtlinien für Design und Benutzerfreundlichkeit entsprechen.
Erstellen eines Popup-Fensters
- Erstellen Sie ein HTML-Element für das Popup-Fenster. Dies ist normalerweise ein Element mit einer eindeutigen ID.
- Verwenden Sie CSS, um das Erscheinungsbild des Popup-Fensters anzupassen. Sie können Größen, Farben, Rahmen usw. festlegen.
- Fügen Sie mit JavaScript dem Popup-Fenster Funktionalität hinzu. Sie können beispielsweise Ereignishandler hinzufügen, um ein Fenster zu öffnen und zu schließen.
Beim Erstellen eines Popup-Fensters ist es wichtig, die Verfügbarkeit und Benutzerfreundlichkeit für die Benutzer zu berücksichtigen. Fügen Sie beispielsweise eine Schaltfläche zum Schließen hinzu, damit der Benutzer das Fenster nach Belieben schließen kann. Es lohnt sich auch zu überprüfen, wie das Fenster auf verschiedenen Bildschirmen und Geräten aussieht und sich verhält, damit es unter allen Bedingungen korrekt angezeigt und ordnungsgemäß funktioniert.
Schritt 1: Erstellen einer HTML-Struktur
Beginnen wir mit dem Erstellen eines Stammelements für unser Popup-Fenster:
Der Einfachheit halber haben wir diesem Element die ID "popup" und die Klasse "popup" zugewiesen. Sie können einen Bezeichner verwenden, um über JavaScript auf ein Element zuzugreifen, und eine Klasse kann zum Anwenden von Stilen verwendet werden.
Fügen Sie nun eine Schaltfläche oder einen Link hinzu, auf den der Benutzer klickt, um das Popup-Fenster zu öffnen:
Hier wird auch die ID "openPopupButton" und die Klasse "open-popup-button" zugewiesen. Wir benötigen eine ID, um einen Ereignishandler in JavaScript zu binden, und eine Klasse kann verwendet werden, um eine Schaltfläche zu stylen.
Schließlich fügen wir den Inhalt hinzu, der im Popup-Fenster angezeigt wird. Im Beispiel verwenden wir einfachen Text:
Привет! Я popup окно.
Dieser Text wird nach dem Öffnen im Popup-Fenster angezeigt.
Jetzt haben wir eine HTML-Struktur, die zum Erstellen eines Popup-Fensters verwendet wird. Im nächsten Schritt fügen wir CSS-Stile hinzu, um das Aussehen dieser Struktur festzulegen.
Schritt 2: Stilisieren eines Popup-Fensters mit CSS
Nachdem wir die grundlegende Popup-Struktur des Fensters mit HTML erstellt haben, besteht der nächste Schritt darin, Stile mit CSS hinzuzufügen.
Im Popup-Fenster-Styling können Sie verschiedene CSS-Eigenschaften verwenden, um das gewünschte Aussehen und Verhalten zu erzielen. Im Folgenden sind einige der grundlegenden Eigenschaften aufgeführt, die Sie zum Stylen verwenden können:
background-color: legt die Hintergrundfarbe für das Popup-Fenster fest.
color: legt die Farbe des Textes im Popup-Fenster fest.
border: legt die Parameter für den Rahmen des Popup-Fensters fest.
border-radius: legt den Rundungsradius der Ecken des Popup-Fensters fest.
box-shadow: fügt einen Schatten für ein Popup-Fenster hinzu.
width: legt die Breite des Popup-Fensters fest.
height: legt die Höhe des Popup-Fensters fest.
Um beispielsweise unserem Popup-Fenster eine Hintergrundfarbe und einen Abrundungsradius für Ecken hinzuzufügen, können wir den folgenden CSS-Code verwenden:
.popupSie können die Eigenschaftswerte ändern, um das gewünschte Erscheinungsbild für Ihr Popup-Fenster zu erzielen.
Sie können auch andere Eigenschaften verwenden und sie kombinieren, um komplexere Stile für das Popup-Fenster zu erstellen. Sie können beispielsweise einen Schatten hinzufügen, Breite und Höhe festlegen oder eine Animation hinzufügen.
Wenn Sie mit dem Styling Ihres Popup-Fensters fertig sind, können Sie Ihrer HTML-Seite einen Link oder eine Schaltfläche hinzufügen, um ihn bei Bedarf anzuzeigen.
Im nächsten Schritt erfahren Sie, wie Sie JavaScript-Code hinzufügen, um Benutzeraktionen innerhalb eines Popup-Fensters zu behandeln.
Schritt 3: Hinzufügen von JavaScript zum Öffnen und Schließen des Fensters
Um das Popup-Fenster auf Wunsch des Benutzers öffnen und schließen zu können, müssen Sie JavaScript-Code hinzufügen.
Um zu beginnen, erstellen Sie eine Funktion, die aufgerufen wird, wenn Sie auf eine Schaltfläche oder einen Link klicken, um das Fenster zu öffnen:
function openPopup()
Hier verwenden wir die getElementById() -Methode, um das Element mit der ID "MyPopup" abzurufen. Dann ändern wir seine Display-Eigenschaft in "block", um das Fenster sichtbar zu machen.
Fügen Sie als Nächstes eine Funktion hinzu, um das Fenster zu schließen, wenn Sie auf die Schaltfläche Schließen klicken oder wenn Sie außerhalb des Fensters klicken:
function closePopup()
In dieser Funktion erhalten wir das Element erneut mit der ID "MyPopup" und ändern seine display-Eigenschaft in "none", um das Fenster auszublenden.
Binden Sie diese Funktionen schließlich mithilfe des onclick-Attributs an Schaltflächen oder Links. Zum Beispiel:
<a href="#" onclick="openPopup()">Открыть окно<a href="#" onclick="closePopup()">Закрыть окноWenn Sie nun auf "Fenster öffnen" klicken, wird das Popup-Fenster geöffnet, und wenn Sie auf "Fenster schließen" klicken, wird es geschlossen.
Verschiedene Variationen von Popup-Fenstern
Popup-Fenster können mit HTML, CSS und JavaScript erstellt werden, und ermöglichen es Entwicklern, zusätzliche Funktionalität zu ihren Webseiten hinzuzufügen. Hier sind ein paar verschiedene Variationen von Pop-up-Fenstern, die Sie erstellen können:
- Modale Fenster: modale Fenster sind die häufigste Art von Popup-Fenstern. Sie blockieren den Seiteninhalt, sodass der Benutzer nur mit dem Fenster interagieren kann. Modale Fenster werden häufig verwendet, um wichtige Nachrichten oder Bestätigungsanfragen anzuzeigen.
- Benachrichtigungen: often-Benachrichtigungsfenster werden verwendet, um Informationsmeldungen, Fehler oder Warnungen anzuzeigen. Optional können sie Tasten zum Handeln oder Schließen enthalten.
- Pop-up-Menü: Popup-Menüs werden mit Popup-Fenstern erstellt und verwendet, um zusätzliche Optionen oder Inhalte anzuzeigen, wenn ein Benutzer ein bestimmtes Element aktiviert.
- Anmeldeformulare: popup-Fenster können verwendet werden, um Anmeldeformulare anzuzeigen, so dass Benutzer schnell und bequem die erforderlichen Felder für die Registrierung auf der Website ausfüllen können.
- Tooltip Fenster: tooltip-Fenster werden angezeigt, wenn Sie den Mauszeiger über ein bestimmtes Element bewegen und eine Quickinfo enthalten, die zusätzliche Informationen über das Element enthält.
Dies sind nur einige der vielen Variationen von Popup-Fenstern, die mit HTML, CSS und JavaScript erstellt werden können. Experimentieren Sie mutig mit verschiedenen Stilen, Animationen und Funktionen, um ein Popup-Fenster zu erstellen, das Ihren Bedürfnissen und dem Design Ihrer Webseite am besten entspricht.
