So erstellen Sie das Popup -Menü in JavaScript

In JavaScript ist ein Popup-Menü ein Menü auf dem Bildschirm, das oben im Text/Bild angezeigt wird, wenn jemand darauf klickt. Normalerweise ist ein Popup-Menü versteckt und kann basierend auf der Aktion des Benutzers angezeigt werden, z. Alles in allem können wir sagen, dass ein Popup -Menü ein Feld ist, in dem die Benachrichtigungen/Nachrichten dem Benutzer angezeigt werden. Diese Benachrichtigungen werden jedoch basierend auf den Aktionen des Benutzers angezeigt.

In diesem Artikel lernen wir, wie Sie in JavaScript ein Popup-Menü erstellen. In dieser Hinsicht werden wir die folgenden Schritte durchführen:

• So fügen Sie HTML -Tags hinzu
• So deklarieren Sie einen Popup -Container
• So stylen/Design ein Popup -Menü
• So fügen Sie JavaScript -Code hinzu, um das Popup -Menü zu öffnen

Also lasst uns anfangen!

So fügen Sie HTML -Tags hinzu

Verschiedene HTML-Tags können verwendet werden, um Popup-Menüs zu erstellen, z. B. eine Schaltfläche, Tag, Tag,

Tag usw. Der unten angegebene HTML -Code unterstützt Sie in dieser Hinsicht.

Klick mich!
class = "popupContent"> Willkommen bei LinuxHint.com

Der obige Snippet beschreibt, dass die Methode showPopup () aufgerufen wird, wenn jemand auf den Text klickt, der dem Popup -Menü zugeordnet ist. Das Popup -Menü zeigt eine Begrüßungsnachricht „Willkommen bei LinuxHint.com ”.

So deklarieren Sie einen Pop-up-Container

Jetzt werden wir den Popup-Container deklarieren, in dem wir das Verhalten des Popup-Menüs mit verschiedenen CSS-Eigenschaften wie Anzeige, Position, Cursor usw. definieren werden.

.Popupclass
Position: Relativ;
Anzeige: Inline-Block;
Cursor: Kontext-Menu;

So stylen/Design ein Popup -Menü

Wir können ein Popup -Menü mit verschiedenen CSS -Eigenschaften stylen, wie im folgenden Snippet gezeigt:

.Popupklasse .PopupContent
Sichtbarkeit: versteckt;
Hintergrundfarbe: Schwarz;
Farbe Rot;
Breite: 200px;
Text-Align: Mitte;
Position: absolut;
Z-Index: 1;
Border-Radius: 10px;
Polsterung: 10px 0;
unten: 100%;
Links: 30%;
Rand -Links: -100px;

/ * Styling Popup -Pfeil *//
.Popupklasse .PopupContent :: After
Inhalt: "";
Position: absolut;
Top 100%;
Links: 10%;
Margin -Links: -10px;
Randbreit: 5px;
Grenzstil: solide;
Grenzfarbe: Schwarz transparent transparent;

In diesem Beispiel setzen wir die Sichtbarkeit als „versteckt“, was bedeutet, dass das Popup -Menü zunächst versteckt ist. Als nächstes verwendeten wir einige CSS-Eigenschaften, um das Popup-Menü wie Hintergrundfarbe, Textausrichtung, Polsterung usw. zu stylen. Zuletzt haben wir die Eigenschaften wie Inhalt, Hintergrundfarbe, Position usw. angegeben. Um den Popup -Pfeil zu stylen.

So fügen Sie JavaScript -Code hinzu, um das Popup -Menü zu öffnen

Jetzt ist es Zeit, den JavaScript -Code zu schreiben. Der folgende Snippet gibt den Code an, um ein Popup -Menü zu öffnen, wenn ein Benutzer auf die DIV klickte:

Funktion showpopup ()
Sei Value = Dokument.GetElementById ("PopupItem");
Pop-up.Klasse.Toggle ("Anzeige");

Der folgende Snippet zeigt den kompletten Code zum Erstellen eines sehr einfachen Popup -Menüs in JavaScript:

So erstellen Sie ein Popup -Menü in JavaScript

Klick mich!
Willkommen bei LinuxHint.com!

Wir erhalten die folgende Ausgabe für die erfolgreiche Ausführung des Codes:

Die Ausgabe zeigt, dass das Popup -Menü angezeigt wird, wenn wir auf den Text klicken.

Abschluss

In JavaScript wird ein Menü auf dem Bildschirm oben im Text/Bild als Popup-Menü bezeichnet. Es wird nur angezeigt, wenn jemand darauf klickt. Ein Popup -Menü bleibt versteckt, bis jemand darauf klickt. In diesem Beitrag wurde eine Schritt-für-Schritt-Anleitung dargestellt, um ein Popup-Menü in JavaScript zu erstellen. Für die Klarheit der Konzepte haben wir einige Beispiele berücksichtigt und sie praktisch implementiert.