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
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
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: 50%; left: 50%; margin: -75px 0 0 -150px; 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"> <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)./a
4 comments
Boa noite!!! Gostei muito do seu blog. Quero pedir um que vi nos blogs tumblr, mas não consegui achar pra blogger. É aquele efeito de menu pop-up lindo!!! Agradeço demais! solteiras-noivas-casadas.blogspot.com.br
Olá. Muito bom, mas a galera aê pode ter problemas com ele usando no Blogger! É que quando ele abre, a pop-up fica tipo por baixo do conteúdo do blog, para concertar isso tem que colocar
z-index: 6;
logo apos o display: none;
se continuar o problema, é só aumentar do 6 para 7 e assim por diante até ficar legal.
Visita aê: http://www.ublogfacil.blogspot.com/
www.supersitebrasil.net-comprar filmes antigos e raros
Olá, há a possibilidade dessa pop-up abrir só em um determinado horário?...Ex: eu preciso que uma janela pop-up seja aberta às 18h55 até as 21h40min, para que as pessoas que estiverem acessando o site sejam redirecionadas para o site do Ustream (palestras ao vivo). Tem como incorporar nesse código?....Please!!!
Agradeço desde já!
Postar um comentário