Erstellen Sie ein Popup-Fenster mit HTML, CSS und JavaScript

Gut gestaltete Popup-Fenster machen Ihre Website interaktiver und moderner. Sie können Märkte schaffen und den Umsatz für Unternehmen steigern.

Sie können Popup-Fenster mit HTML, CSS und JavaScript erstellen. Verwenden Sie die folgende Anleitung, um ein Popup-Fenster von Grund auf zu erstellen und zu gestalten. Es macht Ihre Website interaktiv und schafft großartige Benutzererlebnisse.

Schreiben Sie HTML, um den Inhalt zu strukturieren

Schreiben wir einen HTML-Code mit einem versteckten modalen Fenster, das angezeigt wird, wenn Sie auf eine Schaltfläche klicken. In diesem Fall wird Ihnen die Bedeutung des Wortes angezeigt Hallo! Das Popup-Fenster enthält eine Überschrift und einen Inhalt.

Sobald Sie das modale Fenster auslösen, wird ein Unschärfeeffekt auf den Hintergrund geworfen. Fügen Sie Klassen zu den Abschnitten hinzu, die Sie später zur Auswahl des Modals in JavaScript verwenden.

<Körper>
<TasteKlasse=„offen-modal“>Hallo!Taste>
<divKlasse=„Modal-Content Hidden-Modal“>
<divKlasse=„modal-header“>
<h3>Bedeutung von Hallo!h3>
<TasteKlasse=„nahmodal“>×Taste>
div>
<divKlasse=„modal-body“>
<P>Hallo ist eine Begrüßung in englischer Sprache. Es wird verwendet bei
 der Anfang eines Satzes als Einleitung ob persönlich oder
 am Telefon.P>
div>
div>
<divKlasse=„blur-bg Hidden-blur“>div>
<Skriptsrc=„script.js“>Skript>
Körper>

Die Seite sollte etwa so aussehen:

Möglicherweise möchten Sie auch das untersuchen HTML-Dialogelement wenn Sie das semantischste Markup verwenden möchten.

Schreiben Sie CSS, um Stil hinzuzufügen

Verwenden Sie CSS, um das Popup-Fenster zu formatieren. Platzieren Sie das Fenster in der Mitte der Webseite vor einem schwarzen Hintergrund, damit es gut sichtbar ist. Sie werden auch das Fenster, seinen Hintergrund und die Schriftgröße gestalten.

Erstellen Sie zunächst einen einheitlichen Stil für die gesamte Seite, indem Sie den Rand, den Abstand und die Zeilenhöhe festlegen. Richten Sie dann die Körperelemente in der Mitte auf einem hinteren Hintergrund aus.

* {
Rand: 0;
Polsterung: 0;
Kartongröße: Grenzfeld;
Zeilenhöhe: 1;
}
Körper {
Höhe: 100%;
Anzeige: biegen;
Rechtfertigungsinhalt: Center;
Flex-Richtung: Spalte;
align-items: Center;
Hintergrund: #000;
Lücke: 30px;
}

Als nächstes stylen Sie das offen-modal Taste. Geben Sie ihm eine andere Hintergrundfarbe als der Rest der Seite, damit er hervorsticht. Legen Sie außerdem die Schriftfarbe, -größe, den Abstand und eine Übergangszeit fest.

.offen-modal {
Hintergrund: #20c997;
Farbe: #F f f;
Grenze: keiner;
Polsterung: 20px 40px;
Schriftgröße: 48px;
Grenzradius: 100px;
Mauszeiger: Zeiger;
Übergang: alle 0.3s;
Umriss: keiner;
}
.offen-modal:aktiv {
verwandeln: übersetzenY(-17px);
}

Gestalten Sie dann den modalen Inhalt, der beim Öffnen des Fensters angezeigt wird. Legen Sie einen weißen Hintergrund fest, geben Sie ihm eine geringere Breite als der Körper und fügen Sie Polsterung hinzu.

Geben Sie ihm außerdem einen Z-Index, damit er vor dem erscheint offen-modal Taste. Stellen Sie außerdem die ein versteckt-modal wird als „Keine“ angezeigt, sodass es ausgeblendet bleibt, bis Sie es auslösen.

.modal-content {
Hintergrund: #ccc;
Breite: 500px;
Polsterung: 20px;
Grenzradius: 10px;
Z-Index: 99;
}
.modal-header {
Anzeige: biegen;
Rechtfertigungsinhalt: Raum dazwischen;
Rand unten: 16px;
Farbe: #000;
Schriftgröße: 30px;
}
.modal-bodyP { 
Schriftgröße: 22px;
Zeilenhöhe: 1.5; 
} 
.versteckt-modal { 
Anzeige: keiner; 
}

Dann stylen Sie das nahmodal Klicken Sie auf die Schaltfläche mit transparentem Hintergrund und richten Sie sie in der Mitte aus.

.close-modal {
Hintergrund: transparent;
Grenze: keiner;
Anzeige: biegen;
align-items: Center;
Rechtfertigungsinhalt: Center;
Höhe: 20px;
Breite: 20px;
Schriftgröße: 40px;
}
.close-modal:schweben {
Farbe: #fa5252;
}

Gestalten Sie abschließend das Unschärfeelement, das beim Öffnen des Fensters auf den Hintergrund wirkt. Es verfügt über maximale Höhe und Breite sowie einen Hintergrundfilter. Stellen Sie die Unschärfe auf „Keine“ ein, sodass sie erst sichtbar ist, wenn das Fenster geöffnet wird.

.blur-bg {
Position: absolut;
Spitze: 0;
links: 0;
Höhe: 100%;
Breite: 100%;
Hintergrund: rgba(0, 0, 0, 0.3);
Hintergrundfilter: verwischen(5px);
}
.hidden-blur {
Anzeige: keiner;
}

Nach dem Hinzufügen des CSS sollte die Seite so aussehen:

Steuern Sie das Popup mit JavaScript-Code

Sie verwenden JavaScript, um das modale Fenster zu öffnen und zu schließen, indem Sie es ein- oder ausblenden. Hinzufügen Ereignis-Listener auf die Schaltfläche, um das Öffnen und Schließen auszulösen, wenn Sie darauf klicken.

Wählen Sie zunächst die relevanten Elemente mithilfe der CSS-Klassen aus, die Sie im HTML definiert haben:

lassen modalContent = dokumentieren.querySelector(„.modal-content“);
lassen openModal = dokumentieren.querySelector(„.open-modal“);
lassen closeModal = dokumentieren.querySelector(„.close-modal“);
lassen UnschärfeBg = dokumentieren.querySelector(„.blur-bg“);

Fügen Sie einen Ereignis-Listener hinzu offen-modal Klicken Sie auf die Schaltfläche, sodass das Fenster geöffnet wird, wenn Sie darauf klicken.

openModal.addEventListener("klicken", Funktion () {
 modalContent.classList.remove(„versteckt-modal“);
 BlurBg.classList.remove(„versteckte Unschärfe“);
});

Führen Sie die entgegengesetzten Aktionen aus, um das Schließen des Popups zu handhaben, aber packen Sie sie dieses Mal in eine benannte Funktion ein. Dadurch wird das Verhalten bei mehreren Ereignissen behandelt, die dazu führen können, dass das modale Fenster geschlossen wird:

lassen closeModalFunction = Funktion () {
 modalContent.classList.add(„versteckt-modal“)
 BlurBg.classList.add(„versteckte Unschärfe“)
}

Fügen Sie Ereignis-Listener hinzu, um Klicks auf die Hintergrund- oder Schließen-Schaltfläche sowie den Fall zu verarbeiten, dass der Benutzer die Escape-Taste drückt.

BlurBg.addEventListener("klicken", closeModalFunction);
closeModal.addEventListener("klicken", closeModalFunction);
dokumentieren.addEventListener("Taste nach unten", Funktion (Fall) {
Wenn (Ereignisschlüssel "Fliehen"
 && !modalContent.classList.contains("versteckt")
 ) {
 closeModalFunction();
 }
});

Wenn Sie nun auf klicken Hallo! Klicken Sie auf die Schaltfläche, das Modal erscheint. Sie können es schließen, indem Sie rechts im Fenster auf die Schaltfläche „Abbrechen“ klicken. Siehe den Code auf codepen.io und mit dem Modal interagieren:

Verwendungsmöglichkeiten von Popup-Fenstern

Der Hauptzweck von Popup-/modalen Fenstern in der Webentwicklung besteht darin, den Fokus auf ein bestimmtes Element auf der Website zu lenken. Sobald es ausgelöst wird, wird der Rest der Seite deaktiviert und der Benutzer wird aufgefordert, darauf zu achten.

Popup-Fenster animieren Ihre Benutzeroberfläche. Sie können Ihre Benutzer auf wichtige Informationen auf der Webseite hinweisen und sie darauf aufmerksam machen. Um das Fenster zu entfernen, muss der Benutzer eine Aktion ausführen. Auf diese Weise kann der Benutzer mit dem Fenster interagieren und die beabsichtigten Informationen erhalten.