Janela Pop-Up JavaScript
Neste artigo vou mostrar como usar um recurso muito utilizado na web que são as janelas pop-up. Com as janela pop-up você pode exibir outros conteúdos ou até mesmo propagandas no seu site, sem que o visitante saia da sua página, é claro que tem muita gente que exagera no uso de pop-up`s, o que deixa a navegação muito chata, mas sabendo usar pode ser muito útil.
O código javascript é bem simples, trata-se de uma função que chama o window.open e você pode chamar essa função a qualquer momento na sua página usando os eventos onClick, onLoad e etc…
A função Javascript deve ficar dentro da tag <head></head> do seu site:
<script>
function abrir(pagina){
window.open( pagina , “nome” , “status , scrollbars=no ,width=300, height=200 , top=50 , left=50″);
}
</script>
O código acima nada mais é do que uma função que recebe um parâmetro pagina, esse parâmetro é usado no window.open para indicar qual página ele vai abrir no pop-up.
No windown.open temos alguns passos a seguir:
pagina a ser aberta + , + nome da janela + , + definições da janela (tamanho, posição na tela, barra de rolagem)
Depois de colocar a função acima na página basta chamá-la na página, pode ser ao clicar em uma imagem, em um botão, ao carregar a página, ao fechar a página e etc… Neste exemplo vamos chamar o pop-up ao clicar em um link.A página completa ficará assim:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Abrir Janela Pop-Up</title>
<script>
function abrir(pagina){
window.open( pagina , “nome” , “status , scrollbars=no ,width=300, height=200 , top=50 , left=50″);
}
</script>
</head>
<body>
<a href=”javascript:abrir(‘janela_popup.html’);“>Abrir janela pop-up.</a>
</body>
</html>
Você também pode usar o onClick nas imagens e botões para chamar a função, basta informar qual a página ele abrrirá desta forma:
<img src=”foto.jpg” onclick=”abrir(‘janela_popup.html’);” width=”200″ height=”200″ />
<input type=”button” value=”abrir” onclick=”abrir(‘janela_popup.html’);” />
Lembrando é claro que a página janela_popup.html tem que estar criada e tem que estar na mesma pasta da sua página.
Qualquer dúvida por favor enviem nos comentários que eu terei o prazer de ajudar no que for possível. Até o próximo post!