Ds2Web.com.br » Javascript http://www.ds2web.com.br DiegoSousa Wed, 28 Dec 2011 19:20:06 +0000 en hourly 1 http://wordpress.org/?v=3.1.1 Janela Pop-Up JavaScript http://www.ds2web.com.br/2010/04/janela-pop-up-javascript/ http://www.ds2web.com.br/2010/04/janela-pop-up-javascript/#comments Fri, 02 Apr 2010 16:13:47 +0000 diego@ds2web.com.br http://www.ds2web.com.br/?p=270 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!

]]> http://www.ds2web.com.br/2010/04/janela-pop-up-javascript/feed/ 0