Boa noite!
Bom hoje aqui vou colocar um tutorial para se fazer um lightbox (quem nunca fez um, rs), só que ao inves de fotos vocês pode colocar conteudo ou que for, dependendo sempre da demanda.
Bom é um código relativamente fácil, vamos ao código:
Primeiro este é o código que faz o lightbox aparecer
$(“img”).click(function(){ //Aqui é o evento para abrir o lightbox coloquei na pseudo classe img mas pode ser em uma id de uma div por exemplo #imagem_light ou qualquer coisa do genero.
$(“#caixa_total”).fadeTo(1000,0.4).css(“display”,”block”); //Aqui é onde o fundo da tela fica escuro e aparece este é o papel da div com a id caixa_total que também servirá para fechar o lightbox
$(“#conteudo_caixa”).animate({“width”:”650px”,”marginLeft”:”-=300px”},700);//Aqui é a animação onde a caixa aparece na horizontal a caixa assume a dimensão 650 pixels que pode ser alterado sem problemas
$(“#conteudo_caixa”).css(“display”,”block”).animate({“height”:”625px”,”marginTop”:”-=300px”},700,function(){
$(“#fechar “).css(“display”,”block”);
});//Aqui é onde ela aparece na vertical mostrando toda a caixa no centro da tela e é também onde ela mostra o conteudo neste exemplo somente com a div com a id fechar que é o botão para fechar mais é onde você irá colocar todas as ids que tem de aparecer na caixa, aqui eu usei o callback da função animate que é ótimo o botão fechar só irá aparecer quando a caixa abrir por completo (a caixa assume a altura de 625 pixels que também pode ser alterada)
});
Agora este é o código que faz ele desaparecer
$(“#caixa_total, #fechar”).click(function(){ //Evento para fechar tanto clicando fora da caixa branca quanto no botão fechar
$(“#conteudo_caixa”).animate({“height”:”0px”,”marginTop”:”50%”},700,function(){
$(“#fechar”).css(“display”,”none”);
});//Animação para fechar ela verticalmente com o call back para fazer o conteudo desaparecer
$(“#conteudo_caixa”).animate({“width”:”0px”,”marginLeft”:”50%”},700,function(){
$(“#caixa_total”).fadeTo(1500,0);
$(“#conteudo_caixa”).css(“display”,”none”);
});//Animação para a caixa desaparecer na horizontal e no call back dela eu faço a div caixa total ficar transparente e as duas a caixa total e a div conteudo que é a div branca desaparecerem
});
Agora esta é a estrutura do html para este Lightbox nosso
<div id=’caixa_total’>//A div que faz a tela ficar escura e que serve também para fechar o lightbox
</div>//Fechando a div caixa total
<div id=’conteudo_caixa’> //A div onde vai o conteudo do light box
<div id=’fechar’>//O botão fechar que fica no canto superior direito da caixa aqui tem só um texto para fechar
<strong>X | Fechar</strong>
</div> //Fechando a div do botão de fechar
</div> //Fechando a div do conteudo
Agora o código css
#caixa_total{ //A id da caixa total ela quando aparece fica do tamanho total da tela o que é interessante para tomar cuidado com a div conteudo caixa não ultrapassar essa margem se não acontece a quebra do layout que deixa o efeito com uma aparência bem indesejavel
background:silver;
width:100%;
height:100%;
display:none;
position:absolute;
z-index:10000;
top:0;}
#conteudo_caixa{ //A id do conteudo caixa
position:absolute;
z-index:10001;
margin:50% 50%;
top:-300px;
background:#fff;
display:none;
padding:10px;
}
#fechar{ //A id do botão fechar
float:right;
background:#000;
color:#fff;
padding:4px;
display:none;
cursor:pointer;
}
É isso coloque na sua página esses códigos e personalize a vontade são alguns passos mas é simples.
Qualquer dúvida mande um comentário
Até e bom feriado para todos.
Webtutoriais:DA823564
