Oficina da Net

Subscreva nosso RSS - Assine o RSS e receba as novidades do site em seu leitor.

Pop Up em CSS

Publicado em: 28/05/2008 | CSS | Visualizações: 1.712 | 3 Comentário(s)

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 </head>.



<div id="popUP" class="popup">

<!--Abri uma div chamada popUP com a classe popup-->



<!--Abaixo eu descrevo o texto que irá aparecer no meu pop up, escrevo ele em html-->

<p><strong>ATENÇÃO</strong></p><br />

<p><strong>Caro usuário, obrigado pela sua visita!</strong></p>

<p>Estamos em fase de teste.</p>

<p>Caso haja algum problema em sua navegação pedimos que entre em contato conosco, através da página "<strong>Fale Conosco</strong>".</p>

<p>Obrigado pela compreenssão!</p><br />



<p align="right"><em>Equipe Talentos & Carreiras.</em></p><br />



<!--Coloco abaixo um script em JS que fecha o popup-->

<a href="javascript:void(0)" onclick="fechar('popUP')" class="float_right">Fechar</a>



<!--Pronto meu html esta montado, agora eu fecho a ddiv que eu criei-->

</div>

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:

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

Testado em IE6, IE7 e Firefox

Anderson Villela

compartilhe

Dica: Confira todo nosso conteúdo de CSS no site.

Links patrocinados

Últimos artigos do editor

Fazendo um include do cha.
Galera esses dias tive um pr.

Acelere seu menu iniciar
Você acha que seu menu inici.

Gravando CDs no Windows X.
Se você está executando o Wi.

Sites que convertem arqui.
Uma das maneiras mais fáceis.

Programas que monitoram s.
Quer monitorar o que seu fil.

Serviço de utilidade públ.
Quanto tempo por dia você pa.

> clique aqui para comentar

Opinião do leitor:

3 Comentário(s)

Carlos comentou:

Legal, mas não funcionou no Firefox 3!

Publicado em: 14/07/2008 - 20:06

José Victor de Macedo comentou:

Fantástico Ándersom! Gosto muito de aprender maneiras alternatívas de fazer uma determinada coisa, para não depender sempre das mesmas tecnologias para fazer as mesmas coisas.

Publicado em: 02/06/2008 - 20:19

Jonathan Lamim comentou:

Muito boa a matéira, parabéns!!!

Publicado em: 29/05/2008 - 07:46

Acesso restrito

Destaques

Como assinar um RSS
Aprenda a assinar um blog/site utilizando o agregador de notícias em formato RSS

Peixe Grande 2008
O Oficina da Net está este ano participando do Projeto Peixe Grande 2008 na categoria de Blog. Ajude-nos vote!

iPhone 3G no Brasil
O smartphone da Apple chegou ao Brasil com a tecnologia de terceira geração de telefonia.

Links patrocinados

Autor

Anderson Villela

Site do colunista