Breaking News

Home / Códigos para site / Jquery / Banner popup jquery

Banner popup jquery

02:32 ,

Precisei colocar um banner popup jquery em um site (spei.br) que desenvolvi usando wordpress com um informativo, mas o banner deveria chamar toda a atenção no site quando o internauta acesse a primeira pagina. Assim tive a idéia de colocar um banner estilo popup com botão de fechar.
Para isso precisei de:
  • Imagem do o banner com fundo .png (fundo transparente) e bordas arredondadas para dar um efeito legal baixar modelo
  • Imagem em .png com um preto chapado e 80% de opacidade para usar de fundo, deixando a pagina do site, atrás do banner, escuro para dar destaque ao bannerbaixar modelo
  • Imagem de “Fechar” baixar modelo
Salve os arquivos numa pasta junto ao arquivo da sua pagina html, e no arquivo html chame um script jquery, vamos pegar esse script do servidor do Google. Cole entre as tags <head> de seu site.
1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
Logo abaixo cole o script que fará o banner sumir suavemente
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
$(document).ready(function(){
 
$("#fechar").click(function(){
$("#popup").fadeOut('slow');
});
 
});
 
</script>
Ok, o script que fará ele sumir quando clicar no botão fechar está pronto, agora vamos no corpo do site, depois de <body> e coloque as divs:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- POPUP -->
<div id="popup" style="position:fixed; width:100%; height:100%; background:url(bg.png); z-index:9999;">
 
<div style="width:606px; height:460px; left:50%; margin-left:-303px; position:relative; top:100px;">
 
<img src="popup.png" />
 
<div id="fechar" style="width:43px; height:43px; position:absolute; top:0; right:0; cursor:pointer;">
<img src="fecha.png" />
</div>
 
</div>
 
</div>
<!-- POPUP -->
É isso, fácil, use e altere quando precisar.
Se eu não soube me expressar ou tem dúvida, deixe seu comentário.
Testado em IE, Firefox, Chrome. Apenas versões mais recentes.


por Felipe Campos