Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

JP_xD

Deixar fundo escuro (popup)

Por , em Desenvolvimento frontend

Recommended Posts

JP_xD    0

JP_xD
Postado

ola pessoal, estou tentando fazer um efeito popup aqui, eu tenho a div que fica centralizada no meio ja queria saber um jeito de escurecer o fundo

 

a div fica no meio assim

<a href="#" class="teste" onclick="document.getElementById('pop').style.display='block';"><img src="http://servidor/site/img/encomendas-promocao.jpg" alt=""></a>
               <div id="pop" style="display:none;position:absolute;z-index:9999; margin-top: -100px; width:505px;height:322px;">

agora só falta deixar o fundo escuro

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Você tem que criar uma div "máscara" por último, colocar ela em preto e width:100% e height:100%.
E utilizar um pouco de jQuery ao clicar no botão para aparecer.

 

 

<body>
// SEU CONTEÚDO
 
 
 
<div id="mask">
 
 
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

JP_xD    0

JP_xD
Postado

usei esse script

 

$(document).ready(function (){
if($('#popup').length > 0){
       $('#popup').click(function(){
           $('body').append("<div id='fundo-negro' style='width:300%;height:240%;position:absolute;z-index:9998;background:#df4257;opacity:0.6;top:0;left:0'></div>");

       });
   }
   $('.fechar-promo').click(function(){

       $('#fundo-negro').remove();                
   });
});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito