Efeito lightbox

jgd · December 5, 2011

Olá Pessoal,

Achei o código abaixo na net...

Trata-se da simulação do efeito do “lightbox” que gera uma div de modo a exibir apenas o conteúdo desejado sobre os demais elementos da tela...

Funcionar legal quando há pouco conteúdo e/ou o link do comando está na parte de cima da página. Porém, se há rolagem (na vertical)... E carrego o efeito como no meu exemplo abaixo - O efeito se dimensiona com base no topo da página.

Gostaria de ajuda de vocês para aplicar o efeito independente de estar no “topo” ou “final” da página.

Alguém teria alguma dica de como solucionar a situação?

Segue código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EFEITO LIGHTBOX</title>
<style>
/* Credit/////////////////////////////////////////////////////////*
/* Create a Lightbox effect only with CSS – no javascript needed /*
/* August 22, 2007 Css*/
/* by Emanuele Feronato */
.black_overlay{
display:none;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:#ffffff;
z-index:1001;
-moz-opacity:0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content{
display: none;
position: absolute;
height:480px;
left:50%;
margin:-240px 0 0 -320px;
top:50%;
width:640px;
padding: 5px;
border: 5px solid #669966;
background-color:white;
z-index:1002;
overflow: auto;
}
#titulo1{
top:0;
position:relative;
width:270px;
height:22px;
background-image: url(images/label1.png);
background-repeat:no-repeat;
float:left;
}
#fecha1{
top:0;
position:relative;
border:solid 0px #CC0000;
float:right;
}
/*////////////////////////////////////////////////////////*/
</style>
</head>
<body>

<p>Exemplo de lightbox. <a href = "java script:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Clique para abrir</a></p>

linha 1<br />
linha 2<br />
linha 3<br />
linha 4<br />
linha 5<br />
linha 6<br />
linha 7<br />
linha 8<br />
linha 9<br />
linha 10<br />
linha 11<br />
linha 12<br />
linha 13<br />
linha 14<br />
linha 15<br />
linha 16<br />
linha 17<br />
linha 18<br />
linha 19<br />
linha 20<br />
linha 21<br />
linha 22<br />
linha 23<br />
linha 24<br />
linha 25<br />
linha 26<br />
linha 27<br />
linha 28<br />
linha 29<br />
linha 30<br />
linha 31<br />
linha 32<br />
linha 33<br />
linha 34<br />
linha 35<br />
linha 36<br />
linha 37<br />
linha 38<br />
linha 39<br />
linha 40<br />

<p>Exemplo de lightbox. <a href = "java script:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Clique para abrir</a></p>

<div id="light" class="white_content">
<div id="titulo1">Titulo da pagina</div>
<div id="fecha1"><a href="java script:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="images/btFecharPopUp.png" border=0></a></div>
Conteúdo da div. <a href = "java script:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

Agradeço qualquer ajuda.

RobertoARJ · December 7, 2011

Você quer que o lightbox fique sempre no centro vertical da página?

Se for isso, mude o css 'position' pra 'fixed' em '.black_overlay' e '.white_content'.

abs

Olá Pessoal,
Achei o código abaixo na net...
Trata-se da simulação do efeito do “lightbox” que gera uma div de modo a exibir apenas o conteúdo desejado sobre os demais elementos da tela...
Funcionar legal quando há pouco conteúdo e/ou o link do comando está na parte de cima da página. Porém, se há rolagem (na vertical)... E carrego o efeito como no meu exemplo abaixo - O efeito se dimensiona com base no topo da página.
Gostaria de ajuda de vocês para aplicar o efeito independente de estar no “topo” ou “final” da página.
Alguém teria alguma dica de como solucionar a situação?
Segue código:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EFEITO LIGHTBOX</title>
<style>
/* Credit/////////////////////////////////////////////////////////*
/* Create a Lightbox effect only with CSS – no javascript needed /*
/* August 22, 2007 Css*/
/* by Emanuele Feronato */
.black_overlay{
display:none;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:#ffffff;
z-index:1001;
-moz-opacity:0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content{
display: none;
position: absolute;
height:480px;
left:50%;
margin:-240px 0 0 -320px;
top:50%;
width:640px;
padding: 5px;
border: 5px solid #669966;
background-color:white;
z-index:1002;
overflow: auto;
}
#titulo1{
top:0;
position:relative;
width:270px;
height:22px;
background-image: url(images/label1.png);
background-repeat:no-repeat;
float:left;
}
#fecha1{
top:0;
position:relative;
border:solid 0px #CC0000;
float:right;
}
/*////////////////////////////////////////////////////////*/
</style>
</head>
<body>

<p>Exemplo de lightbox. <a href = "java script:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Clique para abrir</a></p>

linha 1<br />
linha 2<br />
linha 3<br />
linha 4<br />
linha 5<br />
linha 6<br />
linha 7<br />
linha 8<br />
linha 9<br />
linha 10<br />
linha 11<br />
linha 12<br />
linha 13<br />
linha 14<br />
linha 15<br />
linha 16<br />
linha 17<br />
linha 18<br />
linha 19<br />
linha 20<br />
linha 21<br />
linha 22<br />
linha 23<br />
linha 24<br />
linha 25<br />
linha 26<br />
linha 27<br />
linha 28<br />
linha 29<br />
linha 30<br />
linha 31<br />
linha 32<br />
linha 33<br />
linha 34<br />
linha 35<br />
linha 36<br />
linha 37<br />
linha 38<br />
linha 39<br />
linha 40<br />

<p>Exemplo de lightbox. <a href = "java script:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Clique para abrir</a></p>

<div id="light" class="white_content">
<div id="titulo1">Titulo da pagina</div>
<div id="fecha1"><a href="java script:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="images/btFecharPopUp.png" border=0></a></div>
Conteúdo da div. <a href = "java script:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

Agradeço qualquer ajuda.

Sign In

Efeito lightbox

Question

jgd

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

RobertoARJ

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity