Como criar menu pop -up em javascript

No JavaScript, um menu pop-up é um menu na tela que aparece na parte superior do texto/imagem quando alguém clica nele. Normalmente, um menu pop-up está oculto e pode aparecer com base na ação do usuário, como clique com o botão direito do mouse, clique esquerdo ou, às vezes, pairando acima do link. Então, ao mesmo tempo, podemos dizer que um menu pop -up é uma caixa usada para mostrar as notificações/mensagens para o usuário, no entanto, essas notificações aparecem com base nas ações do usuário.

Nesta redação, aprenderemos como criar um menu pop-up em JavaScript e, nesse sentido, seguiremos as seguintes etapas:

• Como adicionar tags HTML
• Como declarar um recipiente pop -up
• Como estilizar/projetar um menu pop -up
• Como adicionar código JavaScript para abrir o menu pop -up

Então vamos começar!

Como adicionar tags HTML

Diferentes tags HTML podem ser usadas para criar menus pop-up, por exemplo, um botão, tag,

tag, etc. O código HTML fornecido abaixo o ajudará a esse respeito.

Clique em mim!
class = "PopUpContent"> Bem -vindo ao Linuxhint.com

O snippet acima descreve que o método Showpopup () será invocado quando alguém clicar no texto associado ao menu pop -up. O menu pop -up mostrará uma mensagem de felicitações “Bem -vindo ao Linuxhint.com ”.

Como declarar um recipiente pop-up

Agora, declararemos o recipiente pop-up onde definiremos o comportamento do menu pop-up usando diferentes propriedades CSS, como exibição, posição, cursor, etc.

.popupclass
Posição: relativa;
Exibição: bloco embutido;
Cursor: Menu do contexto;

Como estilizar/projetar um menu pop -up

Podemos estilizar um menu pop -up com diferentes propriedades CSS, como mostrado no snippet abaixo:

.popupclass .popupContent
Visibilidade: escondida;
Background-Color: Black;
cor vermelha;
Largura: 200px;
Alinhamento de texto: centro;
Posição: Absoluto;
Z-Index: 1;
Radio de fronteira: 10px;
preenchimento: 10px 0;
Inferior: 100%;
Esquerda: 30%;
margem -esquerda: -100px;

/ * Arrow pop -up de estilo */
.popupclass .PopUpContent :: After
contente: "";
Posição: Absoluto;
Os 100 melhores%;
Esquerda: 10%;
margem -esquerda: -10px;
largura de fronteira: 5px;
estilo de fronteira: sólido;
cor de borda: transparente transparente preto transparente;

Neste exemplo, definimos a visibilidade como "oculta", o que significa que inicialmente o menu pop -up será oculto. Em seguida, utilizamos algumas propriedades do CSS para estilizar o menu pop-up, como cor de fundo, alinhamento de texto, preenchimento, etc. Por fim, especificamos as propriedades como conteúdo, cor de fundo, posição, etc. Para estilizar a seta pop -up.

Como adicionar código JavaScript para abrir o menu pop -up

Agora, é hora de escrever o código JavaScript. O snippet abaixo especificará o código para abrir um menu pop -up quando um usuário clicou na div:

função showpopup ()
Deixe o valor = documento.getElementById ("popupItem");
Aparecer.Lista de classe.alternar ("exibir");

O trecho abaixo mostra o código completo para criar um menu pop -up muito simples no JavaScript:

Como criar um menu pop -up em javascript

Clique em mim!
Bem -vindo ao Linuxhint.com!

Obteremos a seguinte saída na execução bem -sucedida do código:

A saída mostra que o menu pop -up aparece quando clicamos no texto.

Conclusão

Em JavaScript, um menu na tela que aparece na parte superior do texto/imagem é referido como o menu pop-up. Aparece apenas quando alguém clica nele. Um menu pop -up permanece escondido até que alguém clique nele. Esta postagem apresentou um guia passo a passo para criar um menu pop-up em javascript. Para a clareza dos conceitos, consideramos alguns exemplos e os implementamos praticamente.