Hvordan lage popup -meny i JavaScript

I JavaScript er en popup-meny en meny på skjermen som vises på toppen av teksten/bildet når noen klikker på den. Normalt er en popup-meny skjult, og den kan vises basert på brukerens handling som høyreklikk, venstre-klikk eller noen ganger sveve over lenken. Så alt i alt kan vi si at en popup -meny er en boks som brukes til å vise varslene/meldingene til brukeren, men disse varslene vises basert på brukerens handlinger.

I denne oppskrivningen lærer vi hvordan du oppretter en popup-meny i JavaScript, og i denne forbindelse vil vi gå gjennom følgende trinn:

• Hvordan legge til HTML -tagger
• Hvordan erklære en popup -container
• Hvordan style/designe en popup -meny
• Hvordan legge til JavaScript -kode for å åpne popup -menyen

Så la oss komme i gang!

Hvordan legge til HTML -tagger

Ulike HTML-tagger kan brukes til å lage popup-menyer for eksempel en knapp, tag,

tag osv. HTML -koden gitt nedenfor vil hjelpe deg i denne forbindelse.

Klikk på meg!
klasse = "PopupContent"> Velkommen til Linuxhint.com

Ovennevnte utdrag beskriver at ShowPopup () -metoden vil bli påberopt når noen klikker på teksten tilknyttet popup -menyen. Popup -menyen vil vise en hilsenmelding “Velkommen til Linuxhint.com ”.

Hvordan erklære en pop-up container

Nå vil vi erklære pop-up-beholderen der vi vil definere oppførselen til popup-menyen ved å bruke forskjellige CSS-egenskaper som visning, posisjon, markør osv.

.popupclass
Posisjon: relativ;
Display: Inline-block;
Markør: kontekstmeny;

Hvordan style/designe en popup -meny

Vi kan style en popup -meny med forskjellige CSS -egenskaper som vist i utdraget nedenfor:

.popupclass .popupcontent
Synlighet: skjult;
bakgrunnsfarge: svart;
fargen rød;
Bredde: 200px;
tekst-align: sentrum;
Posisjon: Absolutt;
z-indeks: 1;
Border-Radius: 10px;
Polstring: 10px 0;
Bunn: 100%;
Venstre: 30%;
margin -venstre: -100px;

/ * Styling popup -pil */
.popupclass .POPUPCONTENT :: Etter
innhold: "";
Posisjon: Absolutt;
Topp: 100%;
Venstre: 10%;
margin -venstre: -10px;
Grensebredde: 5px;
Border-stil: Solid;
grensefarge: svart gjennomsiktig gjennomsiktig gjennomsiktig;

I dette eksemplet setter vi synligheten som "skjult", noe som betyr at popup -menyen til å begynne med vil være skjult. Deretter benyttet vi noen CSS-egenskaper for å style popup-menyen som bakgrunnsfarge, tekst-align, polstring osv. Til slutt spesifiserte vi egenskapene som innhold, bakgrunnsfarge, plassering osv. å style popup -pilen.

Hvordan legge til JavaScript -kode for å åpne popup -menyen

Nå er det på tide å skrive JavaScript -koden. Utdraget nedenfor vil spesifisere koden for å åpne en popup -meny når en bruker klikket på DIV:

funksjon showPopup ()
La verdi = dokument.getElementById ("PopupItem");
popup.Klasseliste.veksle ("display");

Utdraget nedenfor viser den komplette koden for å opprette en veldig enkel popup -meny i JavaScript:

Hvordan lage en popup -meny i JavaScript

Klikk på meg!
Velkommen til Linuxhint.com!

Vi får følgende utdata på vellykket utførelse av koden:

Utgangen viser at popup -menyen vises når vi klikker på teksten.

Konklusjon

I JavaScript blir en meny på skjermen som vises på toppen av teksten/bildet referert til som popup-menyen. Det vises bare når noen klikker på den. En popup -meny forblir skjult til noen klikker på den. Dette innlegget presenterte en trinn-for-trinns guide for å lage en popup-meny i JavaScript. For klarheten i konsepter vurderte vi et par eksempler og implementerte dem praktisk.