Como Fazer Um Pop-up Em HTML

Índice:

Como Fazer Um Pop-up Em HTML
Como Fazer Um Pop-up Em HTML

Vídeo: Como Fazer Um Pop-up Em HTML

Vídeo: Como Fazer Um Pop-up Em HTML
Vídeo: Como ADICIONAR um POP-UP no meu SITE? | Site em HTML 2024, Dezembro
Anonim

A criação de uma janela pop-up em HTML é feita por meio da biblioteca jQuery, que permite integrar um manipulador de eventos a uma página da web e, assim, possibilitar a exibição do conteúdo ativo do site.

Como fazer um pop-up em HTML
Como fazer um pop-up em HTML

Instruções

Passo 1

Abra a página do seu site HTML no editor de texto que você usa para escrever o código que deseja. Você também pode usar o utilitário Windows Notepad padrão para inserir uma janela pop-up. Para fazer isso, clique com o botão direito no arquivo HTML e selecione "Abrir com" - "Bloco de notas".

Passo 2

Na seção do documento, crie uma camada que manipulará jQuery:

etapa 3

Em seguida, você precisa definir o nome da janela pop-up. Para fazer isso, você pode usar os cabeçalhos HTML em camadas:

Título da janela

Passo 4

Depois disso, defina o texto que será exibido na janela usando o script para criar um parágrafo:

Texto

Etapa 5

Em seguida, crie uma camada com a classe close_win para fechar o pop-up, antes de fechar o identificador anterior:

Feche uma janela

Etapa 6

Inclua a biblioteca jQuery no arquivo adicionando a tag necessária entre os descritores do documento. Por exemplo:

Etapa 7

Depois disso, digite o código para exibir o pop-up:

$ (function () {

$ ('# Mostrar'). Hide ();

Etapa 8

Em seguida, você precisa controlar o evento em que o usuário pressionou o botão do mouse para invocar a janela pop-up e controlar o fechamento da janela. Para fazer isso, digite o seguinte código:

$ (‘# Click-me’). Click (function () {$ (‘# show’). Fadein (300);})

$ (‘# Close_win’). Clique em (function () {$ (‘# show’). FadeOut (300);})

& lt / script>})

Este programa trata o usuário pressionando os botões para chamar a janela pop-up e clicando no link para fechá-la.

Etapa 9

Para exibir a janela pop-up na página, você pode usar o link da classe click-me que foi especificado no código acima. Para fazer isso, insira o seguinte código no corpo do documento:

Clique para mostrar o pop-up

Recomendado: