Janela pop-up com CSS e javascript

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: 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

Reply
Luh Dantas
5 de dezembro de 2012 às 17:04

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

Reply
admin
1 de março de 2013 às 13:31

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/

Reply
Sil Campos
31 de janeiro de 2014 às 19:21

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

Assinar: Postar comentários (Atom)