Palavra:   

Revista PHP / Java Script

Andre Pedroso

http://apedroso.blogspot.com

Pop-up não bloqueável com CSS e JAVASCRIPT

Olá amigos, os comentários estão no código.
HTML
  1. <html>
  2. <title></title>
  3.  
  4. <style type="text/css">
  5. #popup{
  6. position: absolute;
  7. top: 30%;
  8. left: 30%;
  9. width: 300px;
  10. height: 150px;
  11. padding: 20px 20px 20px 20px;
  12. border-width: 2px;
  13. border-style: solid;
  14. background: #ffffa0;
  15. display: none;
  16. }
  17. </style>
  18.  
  19. <body onLoad="javascript: abrir()">
www.revistaphp.com.br
Nosso JavaScript
JavaScript
  1. <script language="javascript" type="">
  2. // Função que fecha o pop-up ao clicar no link fechar
  3. function fechar(){
  4.     document.getElementById('popup').style.display = 'none';
  5. }
  6. // Aqui definimos o tempo para fechar o pop-up
  7. function abrir(){
  8.     document.getElementById('popup').style.display = 'block';
  9.     setTimeout ("fechar()", 3000);
  10. }
  11. </script>
www.revistaphp.com.br
 Continuando nosso HTML
HTML
  1. <DIV id="popup" class="popup"> 
  2. <b> APEDROSO.BLOGSPOT.COM </b>
  3. <p>
  4. Esse é um exemplo de popup utilizando DIV. Dessa maneira esse
  5. pop-up não será bloqueado.
  6. </p>
  7. <p>
  8. Andre Pedroso
  9. </p>
  10. <small><a href="javascript: fechar();">[X]</a></small>
  11. </DIV>
  12.  
  13. <br> <a href="javascript: abrir();">Abrie POPUP</a>
  14. <br> <a href="javascript: fechar();">Fechar POPUP</a>
  15.  
  16. </body>
  17. </html>
www.revistaphp.com.br
Abraço
Andre Pedroso

Opções de Interação

  •