Popup com DIV sem Nova Janela (Float Popup)

Raoni Novellino — Sat, 21 Mar 2009 06:39:40 +0000

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:

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:

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 e ).

O Código HTML

No corpo do documento html (entre as tags e ), entra o código:


	
		
			 Fechar

A primeira linha é uma tag

, 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

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

) 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 . O atributo onclick executa o código Javascript dentro dele quando o elemento é clicado com o mouse. Podemos ver ainda na tag , 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:

Esse código deve vir logo antes da tag , ou podemos colocar a função abre_banner() no atributo onload do próprio . 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



	Banner Popup

Fechar

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.

Como Criar Sites | Aprenda grátis como fazer seu site » banner