Come creare un menu popup in javascript

In JavaScript, un menu popup è un menu sullo schermo che appare nella parte superiore del testo/immagine quando qualcuno fa clic su di esso. Normalmente, un menu popup è nascosto e può apparire in base all'azione dell'utente come fare clic con il tasto destro, il clic sinistro. Quindi, tutto sommato, possiamo dire che un menu popup è una scatola utilizzata per mostrare le notifiche/messaggi all'utente, tuttavia, queste notifiche vengono visualizzate in base alle azioni dell'utente.

In questo articolo, impareremo come creare un menu pop-up in JavaScript e, a questo proposito, passeremo attraverso i seguenti passaggi:

• Come aggiungere tag HTML
• Come dichiarare un contenitore popup
• Come modellare/progettare un menu popup
• Come aggiungere il codice JavaScript per aprire il menu popup

Quindi iniziamo!

Come aggiungere tag HTML

Diversi tag HTML possono essere utilizzati per creare menu pop-up, ad esempio un pulsante, tag,

tag, ecc. Il codice HTML indicato di seguito ti aiuterà al riguardo.

Cliccami!
class = "popupContent"> Benvenuti a LinuxHint.com

Lo snippet sopra descrive che il metodo showpopup () verrà invocato quando qualcuno fa clic sul testo associato al menu popup. Il menu popup mostrerà un messaggio di saluto “Benvenuti a Linuxhint.com ".

Come dichiarare un contenitore pop-up

Ora dichiareremo il contenitore pop-up in cui definiremo il comportamento del menu popup usando diverse proprietà CSS come display, posizione, cursore, ecc.

.popupclass
Posizione: relativo;
display: blocco inline;
Cursore: contesto-menu;

Come modellare/progettare un menu popup

Possiamo modellare un menu popup con diverse proprietà CSS come mostrato nello snippet seguente:

.popupclass .popupContent
Visibilità: nascosto;
Background-color: nero;
colore rosso;
larghezza: 200px;
Testo-align: centro;
Posizione: assoluto;
Z-INDEX: 1;
raggio di confine: 10px;
imbottitura: 10px 0;
In basso: 100%;
A sinistra: 30%;
margine -sinistra: -100px;

/ * Styling Popup Arrow */
.popupclass .PopupContent :: After
contenuto: "";
Posizione: assoluto;
i primi 100%;
A sinistra: 10%;
margine -sinistra: -10px;
Widdth di confine: 5px;
Border in stile: solido;
Border-color: trasparente trasparente trasparente nero;

In questo esempio, impostiamo la visibilità come "nascosto", il che significa che inizialmente il menu popup sarà nascosto. Successivamente, abbiamo utilizzato alcune proprietà CSS per modellare il menu popup come colore di sfondo, allineamento del testo, imbottitura, ecc. Infine, abbiamo specificato le proprietà come contenuto, colore di sfondo, posizione, ecc. per modellare la freccia popup.

Come aggiungere il codice JavaScript per aprire il menu popup

Ora è il momento di scrivere il codice JavaScript. Lo snippet seguente specificherà il codice per aprire un menu di popup quando un utente ha fatto clic su Div:

funzione showPopup ()
Let Value = Document.getElementById ("popupitem");
apparire.classlist.intervenire ("display");

Lo snippet seguente mostra il codice completo per creare un menu popup molto semplice in JavaScript:

Come creare un menu popup in javascript

Cliccami!
Benvenuti in Linuxhint.com!

Otterremo il seguente output sull'esecuzione riuscita del codice:

L'output mostra che il menu popup viene visualizzato quando facciamo clic sul testo.

Conclusione

In JavaScript, un menu sullo schermo che appare nella parte superiore del testo/immagine viene indicato come menu popup. Appare solo quando qualcuno fa clic su di esso. Un menu popup rimane nascosto fino a quando qualcuno non fa clic su di esso. Questo post ha presentato una guida passo-passo per creare un menu popup in JavaScript. Per la chiarezza dei concetti, abbiamo considerato un paio di esempi e li abbiamo implementati praticamente.