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