[Resolvido] Light box
Olá Pessoal,
Diante de vários posts referente a fazer um Ligthbox, resolví postar esse script bem simples para explicar mais ou menos como fazer.
Pra quem não sabe, Ligthbox (ou darkbox, janela modal, etc) consiste em uma janela que aparece no meio da tela do navegador sobre o conteúdo da página, impossibilitando que o usuário clique em qualquer coisa que não seja essa janela. Mais ou menos como esse site quando você clica na guitarra: http://aserenata.com.br/produtos/produto_detalhe.php?id=849.
muito bem, antes de mais nada, a ligth box consiste no seguinte:
- Body do documento, conteúdo principal que ficará em primeiro plano (z-index 1);
- Uma camada, geralmente um div que ficará em segundo plano com uma imagem geralmente semi transparente, "tampando" tudo o que está em primeiro plano;- A janela modal, ou seja, a janela que ficará flutuando sobre o conteúdo.
O segundo plano e a janela ficam ocultos, e aparecem diante de um evento, por exemplo ao clicar em uma imagem para ampliar.
Então vamos aos códigos:
Primeiro a pagina html. Note que a segunda e terceira camadas estão no código, mas conforme o CSS que veremos mais abaixo eles se mantém ocultos.
<html>
<head>
<title>Lightbox</title>
</head>
<body class="base">
Conteúdo da página em primeiro plano, esse conteúdo fica inacessível ao mostrar a janela modal<br>
<input type="button" name="mostrar" value="mostrar" onclick="java script:mostra();"/>
<!-- Esse div é o que ficará tampando o conteúdo principal-->
<div name="plano2" class="plano2" id="plano2">
</div>
<!-- Esse é o div da janela modal, que aparecerá sobre toda a página-->
<div name="plano3" class="plano3" id="plano3">
Texto sobre a janela modal, note que esse conteúdo é normalmente acessível ao usuário.
<br/>
<input type="button" name="esconder" value="esconder" onclick="java script:esconde();"/>
</div>
</body>
</html>/estilo do body, ou seja, o primeiro plano/
body{
z-index:2;
}
/*plano 2, ou seja, o "tampão" que cobrirá o body*/
.plano2{
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
background: url("back.png") repeat-y;
background-color: transparent;
width: 100%;
height: 100%;
z-index: 1;
}
/*aqui é a janela que ficará sobre todos os outros elementos*/
.plano3{
visibility: hidden;
background: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
height: 400px;
width: 600px;
margin-top: -200px;
margin-left: -300px;
text-align: center;
padding: 5 5 5 5px;
border-style: solid;
border-width: 5px;
border-color: #1E679A;
z-index: 3;
}É utilizado a propriedade z-index para posicionar os elementos um em cima do outro.
Além disso, a imagem citada acima, back.png, normalmente é uma imagem semitransparente, que pode ser montada em quase todos os aplicativos de desenho, como Corel Draw, Corel PhotoPaint, Photoshop, Inkscape, etc (Dica: esse último é gratuito pra baixar). no meu caso utilizo uma imagem de 1 X 1024 pixels, repetindo-a por todo o eixo y.
Note que a propriedade visibility do plano 2 e 3 estão como hidden, escondido, eles só serão exibidos com essa função java script:
//função para mostrar os elementos de 2º e 3º plano
function mostra(){
document.getElementById('plano2').style.visibility="visible";
document.getElementById('plano3').style.visibility="visible";
}
//função para esconder os elementos de 2º e 3º plano
function esconde(){
document.getElementById('plano2').style.visibility="hidden";
document.getElementById('plano3').style.visibility="hidden";
}As funções fazem nada mais nada menos que alterar os estilos dos elementos, tornando-os visíveis e invisíveis denovo.
Então a idéia básica é isso galera, vocês podem sofisticar mais isso usando uma imagem para abrir a janela modal ampliando-a por exemplo. Isso vai da curiosidade de cada um.
Testei essa página em mozilla Firefox 3 e IE7 e funcionaram perfeitamente.
Não se esqueçam de deixar seus comentários e dúvidas, inclusive se funfou em outros navegadores ou não.
Abraços!!! Até a próxima!!!
Discussão (5)
Carregando comentários...