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:50Muito bom o código, funcionou direitinho !
Você sabe como fazer o banner deslizar na medida que o navegante navegue pela página ?
Obrigado !
abril 21st, 2010 at 18:24Ótimo artigo!
Um dos tutoriais mais bem explicados que já encontrei!
Parabéns!
julho 11th, 2010 at 23:18Excelente tutorial, MUITO obrigado por compartilhar!
Abraço
agosto 30th, 2010 at 22:24Uma dúvida, tem como fazer esse Float Popup abrir uma única vez por IP? Assim quando um visitante visse a propaganda na capa do site não o via novamente nas páginas internas.
agosto 31st, 2010 at 22:26Tem sim, mas ai você vai precisar de um script de programação no lado do servidor, como o PHP.
setembro 16th, 2010 at 14:48Mas tem como você colocar esse banner somente na sua página inicial, se não quiser que ele apareça nas páginas internas do teu site.
Obrigado por comentar.
Abraço.
Obrigado por comentar.
setembro 16th, 2010 at 15:09Abraço.
Alex, sei sim, vou escrever um post sobre isso.
setembro 16th, 2010 at 15:31Obrigado por comentar.
Abraço.
o exemplo disponível no fim do tutorial aparentemente não esta funcionando mais…
obrigado pelo tutorial, esta muito bem explicado.
outubro 21st, 2010 at 12:16Olá Roque, já coloquei o exemplo de volta a funcionar, obrigado pelo aviso.
Abraços.
novembro 3rd, 2010 at 14:28Obrigada!!!!!
janeiro 8th, 2011 at 17:54Muito bom mesmo ta funcionando certinho, era o que estava procurando. Ótimo.
fevereiro 7th, 2011 at 8:46Valeu!!!!
março 23rd, 2011 at 14:58