As janelas pop-up para uma ampla variedade de finalidades têm muitos usos na construção da web. Eles podem ser usados para criar vários tipos de menus, colocar textos publicitários e gráficos, dicas de ferramentas no preenchimento de formulários complexos, e é conveniente colocar os próprios formulários em janelas que não ocupem espaço na página. Em nosso artigo você encontrará uma descrição de como você pode fazer essa janela.
É necessário
Conhecimentos básicos de HTML
Instruções
Passo 1
popup, html, camada oculta
Passo 2
Em muitas páginas na web, você pode ver que bibliotecas sofisticadas de vários frameworks JavaScript (jQuery, MooTools, Prototype, etc.) são usadas para criar janelas pop-up nas páginas. No entanto, na verdade, eles não são necessários para resolver este problema específico. As ferramentas disponíveis em Hypertext Markup Language (HTML) e Cascading Style Sheets (CSS) são suficientes para criar pop-ups. As janelas criadas dessa forma funcionarão independentemente de o JavaScript estar habilitado no navegador do visitante.
Todo o código que cria o pop-up pode ser colocado em duas linhas. A primeira linha cria um link que deve ser clicado para exibir o pop-up:
Clique aqui!
Aqui, o atributo onmouseover da tag do link define o tipo de cursor do mouse padrão para os links. O atributo onclick especifica que quando o link é clicado, o bloco PopUp oculto deve se tornar visível.
A segunda linha é, na verdade, a janela pop-up. Camada com o identificador PopUp e o tamanho da janela, a cor e o tamanho do texto, o fundo e a borda especificados no atributo de estilo:
Este é o texto no pop-up
Não é visível por padrão - isso é indicado pelo seletor de exibição com o valor nenhum na descrição do estilo da camada.
Na verdade, isso é tudo que você precisa para criar uma janela pop-up - coloque essas duas linhas entre as tags e sua página e está pronto para ir.
etapa 3
Para poder fechar a janela pop-up na frente da tag, você precisa adicionar um link que execute a ação oposta - ocultando a camada visível com o identificador PopUp:
perto
Passo 4
E se você quiser que a janela apareça não clicando, mas passando o cursor do mouse, então a primeira linha com o link deve ser modificada desta forma:
mova o mouse aqui!
Etapa 5
Agora você está familiarizado com o princípio e a estrutura do código da janela pop-up, e o design de sua aparência e conteúdo depende inteiramente de seus objetivos e imaginação.
