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 oculta pelo estilo CSS display:none;.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Exibindo pop-up na página HTML</title>
<style type="text/css">
.popup{
position: fixed;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
width: 300px;
height: 150px;
padding: 20px;
border: solid 1px #331;
background: #ffffd0;
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>
<DIV id="popup" class="popup">
<p>Conteúdo do pop-up aqui.</p>
<p><small class="fechar"><a href="javascript: fechar();">Fechar pop-up</a></small></p>
</DIV>
<p><a href="javascript: abrir();">Abrir POPUP</a>
<a href="javascript: fechar();">Fechar POPUP</a></p>
</body>
</html>
A propriedade CSS position:fixed manterá o conteúdo pop-up sempre visível, mesmo que o usuário role a página. O conteúdo é ocultado e omitido do processamento da página na linha diplay:none, que não serve apenas para ocultar o pop-up, mas garante que ele não afete o layout da página.
O programa javascript tem duas funções. A função fechar apenas retorna o pop-up ao seu estado original aplicando novamente o estilo CSS display:none;. A função abrir faz o inverso: muda a propriedade display para block, tornando o pop-up visível. Adicionalmente, coloquei um timeout na função que faz com que a função fechar() seja chamada após 3 segundo (3000 porque o tempo é passado em milissegundos).
