Pop-up não bloqueável # JavaScript- Laboratório do Jon

Fale comigo

siga-me: @JohnyLab

Pop-up não bloqueável

O código abaixo mostra como criar uma janela pop-up baseada em CSS, que torna-se visível quando uma função em JavaScript altera o atributo display e uma DIV é exibida por cima da página. Por não precisar abrir uma nova janela ou aba, o código na realidade não gera um pop-up, e sim uma parte do código fonte que estava oculto pelo estilo CSS display:none;, resultando em uma ilusão que o navegador não contará como uma janela a mais, e não bloqueará. (Se todo mundo soubesse, seria o fim do nosso sossego!)

<html>
<head><title></title>
<style type="text/css">
#popup{
position: absolute;
top: 30%;
left: 30%;
width: 300px;
height: 150px;
padding: 20px 20px 20px 20px;
border-width: 2px;
border-style: solid;
background: #ffffa0;
display: none;
}
</style>
<script type="text/javascript">
function fechar(){
document.getElementById('popup').style.display = 'none';
}
function abrir(){
document.getElementById('popup').style.display = 'block';
setTimeout ("fechar()", 3000);
}
</script>
</head>
<body onload="javascript: abrir()">
<DIV id="popup">
<p>
Esse é um exemplo de popup utilizando DIV. Dessa maneira esse
pop-up não será bloqueado.
</p>
<p>
<small><a href="javascript: fechar();">[X]</a></small>
</p>
</DIV>
<br /><a href="javascript: abrir();">Abrir POPUP</a>
<br /><a href="javascript: fechar();">Fechar POPUP</a>
</body>
</html>

O efeito é interessante pela simplicidade. Eu sou simplista a ponto de achar que o site do Google é um exemplo de design. Mas imagino o efeito que este código poderia causar com um pouco mais de estética. Os estilos de cor de fundo e borda da DIV usada para aparecer/desaparecer são totalmente dispensáveis, pois o que interessa são as dimensões e o posicionamento. Bastaria uma boa imagem de fundo para mudar totalmente a impressão causada pela pop-up. O resultado seria parecido com uma janela de boas vindas de algum aplicativo, com uma bela apresentação e causando uma boa primeira impressão. Talvez nenhum texto fosse necessário, e o efeito não pareceria irritante ou mal-educado se preservado o curto intervalo de duração de exibição da DIV. Para quem quer colocar uma propaganda, bastaria prolongar o tempo de exibição.