Popup com DIV sem Nova Janela (Float Popup)
Nesse post vou mostrar como fazer uma janela popup sem que o navegador abra realmente uma nova janela, com a tag div. Isso é bom pois todos os navegadores hoje bloqueiam popup de nova janela, mas é muito díficil ter bloqueado o Javascript, que é o que utilizaremos também para fazer o div aparecer e desaparecer.
Vamos dividir esse código em arquivos, abaixo descrevo os arquivos:
index.html: Esse arquivo pode ser qualquer arquivo HTML que você queira colocar o banner.
banner.js: Arquivo onde ficarão todos os códigos javascript para mostrar e esconder o popup.
banner.css: Arquivo que contém as classes de estilo. Pode conter outras classes dentro dele ou você pode modificar as classes do popup.
O Arquivo index.html
No arquivo index.html, você precisa chamar os outros dois arquivos, banner.js e banner.css. Para chamar o banner.js, use a seguinte linha:
<script language="JavaScript" src="http://url.para/script/banner.js"></script>
Mude a url no atributo src para a url correta onde está o arquivo banner.js.
Para chamar o arquivo banner.css, use a seguinte linha:
<link href="http://url.para/estilo/banner.css" rel="stylesheet" type="text/css" />
Mude a url no atributo href para a url correta onde está o arquivo banner.css.
Essas linhas normalmente são chamadas dentro do cabeçalho do documento html (entre a tag <head> e </head>).
O Código HTML
No corpo do documento html (entre as tags <body> e </body>), entra o código:
<div id="banner_popup" style="position:absolute; top: 0px; left: 0px; display: none;"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td align="right"><strong><a href="javascript: void(0);" onclick="fecha_banner();" class="linksFechar"><img src="http://localhost/blog_exemplo/banner_popup/icone-fechar.gif" border="0"> Fechar</a></strong></td> </tr> <tr> <td> <a href="http://www.comocriarsites.com/" target="_blank"><img src="http://localhost/blog_exemplo/banner_popup/Ninfeias.jpg" border="0"></a> </td> </tr> </table> </div>
A primeira linha é uma tag <div>, tem o atributo id igual a banner_popup – esse id nós vamos utilizar para achar o div no documento pelo Javascript. O outro atributo do div é o style – esse atributo define o estilo do nosso componente, no caso o div. Ele define que o <div> vai ficar em posição absoluta, a 0 (zero) pixels do topo e da esquerda da página, e não vai ser renderizado (mostrado) na página (display: none;).
Para mais referências de folha de estilo (CSS) entre em Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2. E para mais informações da propriedade de estilo display entre em Propriedade Display do Elemento (CSS).
Esse é o código HTML do banner propriamente dito, lógico que a tabela dentro do div você pode alterar para ficar de acordo com o seu site, mas não esqueça de colocar sempre algum lugar para fechar o banner, mesmo que ele se feche automaticamente após um tempo. Para entender um pouco mais de tabela acesse Como Funciona a Tabela (tag <table>) HTML.
No nosso banner a função que vai fecha-lo é a fecha_banner() que está na primeira linha da tabela, no atributo onclick da tag <a>. O atributo onclick executa o código Javascript dentro dele quando o elemento é clicado com o mouse. Podemos ver ainda na tag <a>, que no atributo href, que seria o link que ele iria seguir caso se clicasse nele, mas ele está com uma função Javascript (javascript: void(0);). O nome javascript no início do atributo href indica que eu vou usar um código Javascript nesse atributo, e a função void(0); diz que quando o link for clicado não seguir para lugar nenhum.
Nesse código temos duas imagens, uma faz parte do fechar do banner e a outra é o banner propriamente dito.
A Chamada Javascript
A última parte no nosso arquivo index.html é a chamda para a função Javascript que irá abrir o banner. Abaixo o código:
<script language="JavaScript">
if(document.getElementById('banner_popup'))
abre_banner();
</script>
Esse código deve vir logo antes da tag </body>, ou podemos colocar a função abre_banner() no atributo onload do próprio <body>. Esse código só faz verificar se existe um elemento com o identificador banner_popup, e se houver, chama a função para exibir o banner.
O Arquivo index.html Completo
<html>
<head>
<title>Banner Popup</title>
<link href="banner.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="banner.js"></script>
</head>
<body>
<div id="banner_popup" style="position:absolute; top: 0px; left: 0px; display: none;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right"><strong><a href="javascript: void(0);" onclick="fecha_banner();" class="linksFechar"><img src="http://localhost/blog_exemplo/banner_popup/icone-fechar.gif" border="0"> Fechar</a></strong></td>
</tr>
<tr>
<td>
<a href="http://www.comocriarsites.com/" target="_blank"><img src="http://localhost/blog_exemplo/banner_popup/Ninfeias.jpg" border="0"></a>
</td>
</tr>
</table>
</div>
<script language="JavaScript">
if(document.getElementById('banner_popup'))
abre_banner();
</script>
</body>
</html>
O Arquivo banner.js
No arquivo banner.js vamos colocar todas nossas funções Javascript. Abaixo o conteúdo do arquivo:
function fecha_banner()
{
var banner_obj = document.getElementById('banner_popup');
banner_obj.style.display = 'none';
}
function fecha_banner_timeout()
{
setTimeout('fecha_banner()', 10000);
}
function abre_banner()
{
var banner_obj = document.getElementById('banner_popup');
banner_obj.style.left = '200px';
banner_obj.style.top = '100px';
banner_obj.style.display = '';
fecha_banner_timeout();
}
A função fecha_banner()
A função fecha_banner() fecha o banner, obviamente. Ela é chamada quando se clica no Fechar do banner ou quando se passa dez segundos, como vamos ver na próxima função. Ela pega o objeto do banner através da função getElementById() e atribui ao estilo display o valor none, que faz o elemento deixar de ser exibido (renderizado).
A função fecha_banner_timeout()
A função fecha_banner_timeout() chama a função fecha_banner() após dez segundos, utilizando a função setTimeout() do Javascript. A função setTimeout() do Javascript é bem legal, mas ela é assunto de um post futuro. Basicamente ela executa uma determinada função dado um determindo tempo, em milisegundos.
A função abre_banner()
A função abre_banner(), como o nome diz, abre o banner, ou melhor explicando, faz ele ser exibido. Ela pega o objeto do banner, depois diz onde o banner vai aparecer definindo os estilos top e left (no nosso caso vai aparecer a 200 pixels da esquerda e a 100 pixels do topo), vai também definir o estilo display para vazio, que diz que vai ser utilizado o display padrão do elemento para renderiza-lo. Por fim, ele chama a função fecha_banner_timeout(), que vai esperar dez segundos para fechar o banner.
O Arquivo banner.css
No arquivo banner.css vamos colocar somente o estilo do link de fechar, ela pode conter outros estilos caso necessite. Abaixo o código:
.linksFechar:link
{
text-decoration: none;
font-size: 14px;
color: #000000;
}
Nesse arquivo só é definido esse estilo, que o texto não vai ser sublinhado, a fonte vai ter tamanho 14 pixels e a cor vai ser preta.
E juntando tudo isso vamos ter um banner popup sem abrir uma nova janela, utilizando Javascript.
Para ver esse exemplo funcionando, entre em Exemplo de Banner Popup.
Parabens pelo artigo esta a procura disso a dias muito bom .. vlw
agosto 13th, 2009 at 14:27Mto bom!
Obrigado pela dica!
Parabens!
janeiro 29th, 2010 at 23:00Valeu Rodolfo, é sempre bom saber que alguém curtiu o que escrevemos.
Abraços.
janeiro 30th, 2010 at 1:50