Jak utworzyć menu wyskakujące w JavaScript

W JavaScript menu wyskakujące jest menu na ekranie, które pojawia się na górze tekstu/obrazu, gdy ktoś go kliknie. Zwykle menu wyskakujące jest ukryte i może pojawić się w oparciu o działanie użytkownika, takie jak kliknięcie prawym przyciskiem myszy, kliknięcie w lewo lub czasami unoszące się nad linkiem. Podsumowując, możemy powiedzieć, że menu wyskakujące jest pola używane do wyświetlania użytkownikowi powiadomień/wiadomości, jednak te powiadomienia pojawiają się w oparciu o działania użytkownika.

W tym artykule nauczymy się, jak utworzyć menu wyskakujące w JavaScript, i pod tym względem przejdziemy przez następujące kroki:

• Jak dodać tagi HTML
• Jak ogłosić wyskakujący pojemnik
• Jak stylizować/zaprojektować menu wyskakujące
• Jak dodać kod JavaScript, aby otworzyć menu wyskakujące

Więc zacznijmy!

Jak dodać tagi HTML

Do tworzenia wyskakujących menu na przykład można użyć różnych tagów HTML, przycisk, znacznik,

tag itp. Podany poniżej kod HTML pomoże w tym względzie.

Kliknij!
class = "popupcontent"> Witamy w Linuxhint.com

Powyższy fragment opisuje, że metoda showpopup () zostanie wywołana, gdy ktoś kliknie tekst powiązany z menu wyskakującym. Menu wyskakującego pokaże komunikat z życzeniami „Witamy w Linuxhint.com ”.

Jak ogłosić wyskakujące pojemnik

Teraz zadeklarujemy wyskakujące pojemnik, w którym zdefiniujemy zachowanie menu wyskakującego za pomocą różnych właściwości CSS, takich jak wyświetlacz, pozycja, kursor itp.

.Popupclass
Pozycja: względny;
Wyświetlacz: Block Inline;
Kursor: kontekst-menu;

Jak stylizować/zaprojektować menu wyskakujące

Możemy stylizować menu wyskakujące z różnymi właściwościami CSS, jak pokazano na poniższym fragmencie:

.Popupclass .popupcontent
Widoczność: ukryta;
kolor tła: czarny;
kolor czerwony;
szerokość: 200px;
Text-Align: Center;
Pozycja: absolutna;
z-index: 1;
RADIUS BRAVES: 10px;
Wyściółka: 10px 0;
Dół: 100%;
Po lewej: 30%;
margines -lew: -100px;

/ * Stylizacja wyskakująca strzałka */
.Popupclass .popupcontent :: po
treść: "";
Pozycja: absolutna;
Top 100%;
Po lewej: 10%;
margines -lew: -10px;
szerokość graniczna: 5px;
Styl graniczny: solidny;
kolor graniczny: przezroczysty przezroczysty przez przezroczystość czarnego przezroczystego;

W tym przykładzie ustawiamy widoczność jako „ukryta”, co oznacza, że ​​początkowo menu wyskakujące zostanie ukryte. Następnie wykorzystaliśmy niektóre właściwości CSS do stylizowania menu wyskakującego, takie jak kolor tła, tekst, wyściółka itp. Na koniec określaliśmy właściwości, takie jak treść, kolor tła, pozycja itp. Aby stylizować wyskakującą strzałkę.

Jak dodać kod JavaScript, aby otworzyć menu wyskakujące

Czas napisać kod JavaScript. Poniższy fragment określi kod, aby otworzyć menu wyskakujące, gdy użytkownik kliknie Div:

funkcja showpopup ()
Niech wartość = dokument.getElementById („Popupitem”);
okienko.Lista klas.Toggle („Display”);

Poniższy fragment pokazuje pełny kod, aby utworzyć bardzo proste menu wyskakujące w JavaScript:

Jak utworzyć menu wyskakujące w JavaScript

Kliknij!
Witamy w Linuxhint.com!

Otrzymamy następujące dane wyjściowe po pomyślnym wykonywaniu kodu:

Wyjście pokazuje, że menu wyskakujące pojawia się po kliknięciu tekstu.

Wniosek

W JavaScript menu na ekranie, które pojawia się na górze tekstu/obrazu, jest określane jako menu wyskakujące. Pojawia się tylko wtedy, gdy ktoś go kliknie. Menu wyskakujące pozostaje ukryte, dopóki ktoś go nie kliknie. Ten post przedstawił przewodnik krok po kroku, aby utworzyć menu wyskakujące w JavaScript. Dla jasności pojęć rozważaliśmy kilka przykładów i wdrożyliśmy je praktycznie.