Pop Up em CSS

Meu diretor pediu para colocar uma popup em um site nosso, mas não queria colocar igual aquelas que os bloqueadores fecham então desenvolvi uma em css.

Por | @senhorvillela Programação
Meu diretor pediu para colocar uma popup em um site nosso, mas não queria colocar igual aquelas que os bloqueadores fecham então desenvolvi uma em css.

Segue o código ai galera.

Irei explicar o código que vai no html, você deve inserir esse html logo após que você fechar o .





Agora vamos estruturar nossa popup criando o css dela.


#popUP {         /*começo nomeando a minha div*/
position:absolute;        /*posicionei ela em absoluto*/
width:300px;        /*defini a largura*/
height:80px;         /*defini a altura*/
background:#0000FF;      /*aqui eu defini a cor do background*/  
text-align:justify;           /*alinhei o texto justificado*/
left:400px;             /*alinhei meu texto a esquerda e declarei um valor a ele*/
top:50px;             /*meu texto ficará a 50px do topo*/
border:1px solid #006699;    /*coloquei uma borda no meu pop up, borda com 1 pixel solida*/
font:14px/20px Tahoma, Arial, Verdana;     /*defini o tamanho e a fonte que ficará o texto da minha popup*/
color:#fff;                              /*defini aqui a cor do meu texto*/
padding:10px; /*defini a distância do texto para minha borda*/
}

#popUP a {    /*vou difinir agora a classe do link fechar*/
padding:-40px;         /*apenas defini a distância do link fechar para minha borda*/
}


Minha pop up ficou assim:

Pop Up em CSS

Se der algum problema comente abaixo, que eu solucionarei seu problema.

Testado em IE6, IE7 e Firefox

Anderson Villela

Mais sobre: css popup html
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo