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. <title></title>
  2.  
  3. <style type="text/css">
  4. #popup{
  5. position: absolute;
  6. top: 30%;
  7. left: 30%;
  8. width: 300px;
  9. height: 150px;
  10. padding: 20px 20px 20px 20px;
  11. border-width: 2px;
  12. border-style: solid;
  13. background: #ffffa0;
  14. display: none;
  15. }
  16. </style>
  17.  
  18. <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. Esse é um exemplo de popup utilizando DIV. Dessa maneira esse
  4. pop-up não será bloqueado.
  5. </p>
  6. Andre Pedroso
  7. </p>
  8. <small><a href="javascript: fechar();">[X]</a></small>
  9. </DIV>
  10.  
  11. <br> <a href="javascript: abrir();">Abrie POPUP</a>
  12. <br> <a href="javascript: fechar();">Fechar POPUP</a>
  13.  
  14. </body>
  15. </html>
www.revistaphp.com.br
Abraço
Andre Pedroso

Opções de Interação