Imagem pop-up

[marvi]

Olá pessoal,

Gostaria de saber como fazem aqueles pop-up que tomam a tela toda do site e a pessoa tem que clicar em fechar para poder navegar no site.

Como faz? Pois, pesquisei aqui e só achei pop-up como janelas, quero como se fosse uma imagem flutuando, tomando a frente do site ao acessá-lo.

Desde já, agradeço

Marcelo

[Matheus Matos]

olá marvi.. isso é mais simples do que você imagina!

Basta colocar uma div por cima de todas, e que tenha 90% por 90% de largura e altura... no onclick de um botão, no caso um "fechar publicidade" deixar a div oculta! Simples assim!

Eu ajudei alguém aqui do fórum assim... hm.. deixe me ver...

leia esse tópico: http://scriptbrasil.com.br/forum/index.php...=140829&hl=

depois volta aqui para a gente te ajudar a adaptar as suas necessidades!

Vlw

Matheus Matos

[marvi]

Sei, mas aí é que está.

No meu site tenho um CSS para outras funções:

<!--
* { margin: 0; padding: 0; }
body {background-image: url('imagensnovas/topo.jpg'); background-repeat: repeat-x; }
#conteudo {  width:100%; *width:100%;margin: 172 auto; *margin: 172 auto; text-align: left; position: absolute; *position: absolute; min-height: 100%; *min-height: 100%; background-image: url('imagens/meioo000001.jpg');}

#rodape {position:relative; height: auto; *height: auto; height: 138%; *height: 100%; width:100%; *width:100%; color:#fff;  bottom:0px; *bottom:0px; height: 155px; *height: 155px; margin:0px; *margin:0px; background-image: url('imagensnovas/rodape.jpg');}
* HTML #rodape { margin-bottom:0px; bottom:-1px; }
rodape-conteudo { text-align:center; line-height: 35px; *text-align:center; *line-height: 35px;}
#frente { position:relative; margin: -154 auto; *position:relative; *margin: -154 auto;}
#demo-table {
    width: 730;
  height: 1151;
*height: 1149;

border: 0px solid #f00; 
margin-left: auto;
margin-right: auto;

  }
  #demo-table1 {
    width: 720;
  height: 1;

border: 0px solid #f00; 
margin-left: auto;
margin-right: auto;

  }

-->

E se acrescento esse código do pop-up:

#pop_up {
  position: fixed;
  top: 50%; 
  left: 45%;
  height: 200px; 
  width: 400px; 
  margin-top: -100px; 
  margin-left: -200px; 
  background: #FF0000; 
  z-index: 1000; 
  overflow: auto;
}

Ele acaba destruindo toda a formatação do site, pois ele só funciona sozinho, sem o primeiro CSS que mostrei, entende? Mas, também já tenho no site essa css que deixa o texto flutuante:

#clearfix { width:30%; margin-top: 5px;height: 275px; width: 255px; left: 50%; margin-left: 110px; *margin-top: 0px; *margin-left: 110px; position: absolute;}

Estava olhando acho que tem a ver com position: fixed ou relative ou absolute...dos css, será?

Quando coloco a opção absolute no seu csss pop up ele não deforma, mas também não fecha, fica "congelado"

Editado Setembro 16, 2009 por marvi

[marvi]

Resolvi uma parte.

Deixou de deformar o site quando coloquei a opção position: absolute:

#pop_up {
  width:30%;
  position: absolute;
  top: 20%; 
  left: 45%;
  height: 600px; 
  width: 700px; 
  margin-top: -100px; 
  margin-left: -300px; 
  \* background: #FF0000; */
  z-index: 1000; 
  overflow: auto;
}

Contudo, se eu mudo de resolução, o pop-up fica com uma parte escondida no navegador. Não tem como ela se adaptar a todas resoluções?