Javascript Popup

Os popups s�o janelas extras, criadas dentro de uma p�gina �painel�. Essa p�gina pode ser chamada de p�gina pai ou m�e, e o popup, p�gina filha. Essas p�ginas normalmente s�o bem simples, criadas para, por exemplo, apresentarem uma imagem, ou qualquer outro arquivo de m�dia, n�o sendo isso uma exceç�o. O primeiro c�digo, a seguir, ir� mostrar como abrir um popup, de forma bem b�sica, ser� apenas para que o estudante, que ainda n�o conheça como isso funciona, possa se acostumar com o c�digo.

Abrindo popups

<html>
<head>
<script  type="text/javascript">
function newPopup(){
varWindow = window.open ('popup.html', 'popup')
}
</script>
</head>
<body>
<a href="javascript:newPopup()">Abrir popup</a>
</body>
</html>

Listagem 1. Exemplo b�sico de como abrir um popup.

Logo abaixo, segue-se a explicaç�o de cada linha do c�digo:

function newPopup()

Primeiramente, devemos criar uma funç�o, cujo nome dei newPopup(). Esse nome � opcional, logo, se voc� quiser por outro nome qualquer, fique a vontade, mas � melhor sempre usar textos f�ceis de lembrar e pouco complexos. Quanto aos par�nteses, � obrigat�rio para o c�digo funcionar.

{varWindow = window.open ('popup.html', 'popup') }

Primeiramente, definiremos uma vari�vel. Nesse c�digo, seus primeiros caracteres s�o opcionais; devem ser postos, mas voc� pode por o que quiser, portanto que terminem com �Window�, assim como no exemplo acima. window.open � um c�digo para abrir arquivos, no caso, o popup. Dentro dos par�nteses que se seguem agora, no primeiro conjunto de aspas simples, pomos o endereço do popup; e no segundo, pomos seu nome, esse, fica a seu crit�rio. Toda essa linha deve ficar dentro de chaves, demonstrando ser o valor da funç�o anteriormente criada. E todas essas duas linhas explicadas at� agora, devem estar dentro da tag head, diferentemente do c�digo que se segue, que fica dentro da tag body.

<a href="javascript:newPopup()">Abrir popup</a>

N�o explicarei a tag <a>, pois esse j� � assunto b�sico de HTML. O c�digo que est� dentro das aspas faz correspond�ncia a function, que criamos logo acima. O newPopup() � o nome da funç�o, lembra? Esse c�digo deve ser precedido por �javascript:�, sen�o o navegador, ao inv�s de executar a funç�o newPopup(), ir� procurar um diret�rio (pasta e arquivo) com esse nome. At� agora, esse c�digo nada tem de especial com o simples do HTML, mas suas diferenças aparecer�o logo.

� interessante criar uma funç�o, pois caso voc� queira criar v�rios links para o mesmo popup, o c�digo ficar� bem menos extenso. Mas, por motivo qualquer, voc� queira fazer tudo dentro da tag body, usar� esse c�digo:

<body>
<a href="" onClick="javascript:window.open ('popup.html') ; return false">Abrir popup</a>
</body>

Listagem 2. Exemplo b�sico de como abrir um popup sem function.

Como nesse caso, se n�o for usar uma function, aconselho p�r o c�digo JavaScript em onClick, ao inv�s de em a href, pois nesse �ltimo, tanto a janela pai como a janela filha ser�o alteradas. N�o se esqueça de por o return false, para anular qualquer valor que tiver o a href, e deixar todo o gerenciamento do link com o onClick.

Como gerenciar popups

Agora, que o c�digo b�sico para abrir um popup j� foi mostrado, poderei ensinar como gerenciar a abertura desses popups. Leia as propriedades abaixo:

width	Serve para especificar a largura do popup;
height	Serve para especificar a altura do popup;
top	Serve para especificar o qu�o distante estar� o popup do topo da tela;
left	Serve para especificar o qu�o distante estar� o popup do lado esquerdo da tela;
scrollbars	Serve para manipular a barra de rolagem do popup;
resizable	Serve para manipular a opç�o de redimensionar o popup;
directories	Serve para manipular a barra de diret�rios;
menubar	Serve para manipular o menu de um browser;
location	Serve para manipular a barra de endereços de um popup;
status	Serve para manipular a barra de status de um popup;
toolbar	Serve para manipular a barra de ferramentas de um popup;
titlebar	Serve para manipular a barra de t�tulo de um popup.

Essas propriedades, como ficou claro, servem para manipular a janela do browser que ir� carregar o popup. Para us�-las, o c�digo � esse:

<head>
<script  type="text/javascript">
function newPopup(){
varWindow = window.open (
'popup.html',
'pagina',
"width=350, height=255, top=100, left=110, scrollbars=no " );
}
</script>
</head>

Listagem 3. Exemplo das propriedades da janela que ir� carregar o popup que podem ser gerenciados.

O c�digo acima foi desenvolvido apenas para elucidar o uso do gerenciamento das propriedades que podem ser alteradas em uma janela popup.

Eu pus apenas alguns poucos exemplos, mas com base neles, o leitor poder� prosseguir facilmente. Talvez, um fato interessante que deva ser notado, � que n�o foi preciso p�r os valores, sejam num�ricos ou booleanos (verdadeiros ou falsos) entre aspas, como acontece no HTML. Nesse caso, � por que eles est�o dentro de aspas coletivas. No caso de scrollbars, tamb�m entre os do mesmo tipo desse, os valores ser�o expressos em yes ou no, como verdadeiro ou falso.

� importante saber que quase a maioria desses c�digos n�o s�o aceitos nos navegadores modernos. Por exemplo, o status. Antigamente, a barra de status era fixa, logo, havia sentido em deixa-la l� ou n�o, mas hoje em dia, a maioria dos browsers modernos usam barras de status s� quando se passa em cima de um link, e tamb�m, acredito eu, por motivos de segurança, alguns desses n�o aceitam o status, entre outros. Mas entre esses, o Internet Explorer ainda aceita a maioria.

Criando popups diretamente do navegador

Esse � um tema bem interessante. � poss�vel criar popups diretamente do browser, ou seja, sem arquivos salvos. Esses popups fazem tudo que uma p�gina normal faz.

<head>
<script  type= "text/javascript">
newpopupWindow = window.open ('', 'pagina', "width=250 height=250");
newpopupWindow.document.write ("Aqui voc� pode por o que quiser");
</script>
</head>

Listagem 4. Exemplo b�sico de como criar um novo popup diretamente do browser.

Esse exemplo � bem simples. Logo ao iniciar a p�gina de controle, ou p�gina pai/m�e, ser� carregado um popup 250x250 pixels, e ele ter� escrito na tela �Aqui voc� pode p�r o que quiser�, assim como no exemplo acima. Dentro desses par�nteses, voc� pode p�r n�o somente textos, como imagens, m�dias, e at� outros scripts. Mas n�o se esqueça de dentro dessas aspas duplas, s� usar aspas individuais. Por exemplo:

<head>
<script  type= "text/javascript">
newpopupWindow = window.open ('', 'pagina', "width=250 height=250");
newpopupWindow.document.write ("Aqui voc� pode por o que quiser, por exemplo, uma imagem. <br/> <img src='imagem.jpg'> <br/> N�o se esqueça de n�o usar aspas duplas, s� aspas individuais" );
</script>
</head>

Listagem 5. Exemplo de como usar elementos mais complexos dentro de um popup criado diretamente pelo browser.

Nesse �ltimo exemplo, coloquei uma imagem dentro do popup, e poderia por muito mais.

Mas, se ao inv�s do popup carregar diretamente ap�s o carregamento da p�gina m�e, voc� quiser que ele abra atrav�s de um link, basta adicionar o c�digo em function, e criar o link correspondente em body.

<html>
<head>
<script  type="text/javascript">
function criarPopup(){
newWindow = window.open ('', 'pagina');
newWindow.document.write ("Este � um novo popup <br/> <img src='imagem.jpg' width='100' height='100'>");
}
</script>
</head>
<body>
<a href="javascript:criarPopup()">Criar Popup</a>
</body>
</html>

Listagem 6. Exemplo de como criar um popup atrav�s de um link, pelo m�todo function.

Fechando um popup

Para se fechar um popup tamb�m � bem f�cil.

<html>
<head>
<script  type="text/javascript">
function abrirPopup(){
abrirWindow = window.open('', 'pagina')
}
  
function fecharPopup(){
fecharWindow = abrirWindow.close()
}
</script>
</head>
<body>

<a href="javascript:abrirPopup()">Abrir popup</a>
<br/>
<a href="javascript:fecharPopup()">Fechar Popup</a>
</body>
</html>

Listagem 7. Exemplo de como fechar um popup.

N�o se esqueça daquele velho probleminha de que os popups t�m que ser autorizadas para funcionarem. Ent�o, se os c�digos derem errado, verifique se o popup n�o foi bloqueado, ou tente usar o Internet Explorer, ele � menos restritivo com popups.

Esse artigo apenas explicou as funç�es b�sicas de um popup, que � o seu objetivo, correspondendo, respectivamente, ao t�tulo. Al�m dessas funç�es expostas aqui, existem in�meras outras bem mais complexas, como conectar v�rios popups, fazendo com que eles interajam entre si; configurar uma rolagem autom�tica aos popups logo ap�s eles serem carregados, ou em tempo determinado, entre muitas outras.

Opera��es simples com popups em JavaScript

Veja neste artigo como criar e trabalhar com popups em JavaScript, abrindo, fechando, criando e gerenciando seus complementos. Confira!

Abrindo popups

Como gerenciar popups

Criando popups diretamente do navegador

Fechando um popup

Artigos relacionados