[Resolvido] DIV como pop-up com efeito sombra na pagina.

[Flavio_mdn 0]

Boa noite pessoal, estou emperrado em um problema.

 

fiz uma div que aparece como pop-up, algo bem simples, mas agora preciso

colocar o efeito de sombra no resto da pagina quando a div/pop-up está ativa.

como se fosse um lightbox.

 

aqui o coidigo HTML da div/pop-up

 

<!-- DIV POP UP -->

<div id="pop">

<a class="linkpop" href="#" onclick="document.getElementById('pop').style.display='none';"><img src="site/form2_fechar.png"/></a>

<br />

<form method="post" action="form2.php" id="form2">

<fieldset>

<legend>Cadastro:</legend>

<label for="nome">Nome:</label>

<input type="text" name="nome" id="usuario"/><br />

<label for="tel">Tel.:</label>

<input type="text" id="tel" name="tel"/><br />

<label for="mail">E-mail:</label>

<input type="text" id="mail" name="mail"/><br />

<input type="submit" name="botaoform2" value="cadastrar"/>

</fieldset>

 

</form>

 

</div>

 

<a href="#" rel="lightbox" onclick="document.getElementById('pop').style.display='block';"></a> <!-- link para chamar o pop up, nao tem conteudo (botao) -->

 

 

 

e aqui o CSS que usei para controlar:

 

#pop{display:open;position:fixed;top:45%;left:45%;margin-left:-150px;margin-top:-100px;padding:10px;width:400px;height:200px;border:1px solid #d0d0d0; text-align:left;

z-index:10;background-color:#fff;}

.linkpop{position:absolute;top:-5%; right:-3%;}

 

 

 

Entenderam?

O que eu quero e fazer um formulario de cadastro que enquanto fique ativo o resto da pagina fique escura (sombra) e

ao fecha-lo a pagina volta ao normal.

 

obrigado.

[Ismaeldm 5]

Eu pelo menos iria fazer tudo por CSS, iria fazer a tal DIV ocupar 100% da pagina, com background preto, e colocar uma opacidade, aí no centro desta DIV colocar a pop-up

[Flavio_mdn 0]

Ismaeldm é uma boa saída, não pensei assim, vou testar aqui e posto o result. Mas se mais alguém enxergar outra solução por favor postem.

 

Obrigado Ismaeldm!

[Ismaeldm 5]

Ismaeldm é uma boa saída, não pensei assim, vou testar aqui e posto o result. Mas se mais alguém enxergar outra solução por favor postem.

 

Obrigado Ismaeldm!

Capaz, de boa xD

Só tem uma coisa, eu tentei fazer como te disse, entretanto não obtive tanto sucesso... Ao colocar opacidade na DIV 100%, ele adicionou opacidade na pop-up também (esqueci disto).

O jeito então é fazer uma img 1x1 que seja preta e transparente, e usar como background repetido na DIV ^^

boa sorte

[Flavio_mdn 0]

Cara, tive que usar jquery mesmo!

mas deu tudo certo!

Valeu, abraço.