Ayuda con Lightbox en css puro

bacdavi · #1 (**permalink**) 29/06/2009, 12:07

Hola amigos:

He estado intentando hacer un lightbox con css puro, encontre este ejemplo pero surge un problema, si no tengo scroll hacia abajo con contenido en la ventana el lightbox funciona genial queda centrado y opaca con el css creado, pero si tengo contenido q force al scroll del navegador el lightbox se ejecuta pero solo en la parte superior de la ventana.

Código HTML:

<html>
<head>
<script language="javascript" type="application/javascript"> 
function showLightbox(valor) {
	document.getElementById(valor).style.display='block';
	document.getElementById('fade').style.display='block';
}
function hideLightbox(value) {
	document.getElementById(value).style.display='none';
	document.getElementById('fade').style.display='none';
}
<style type="text/css">
.fadebox {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:500;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
.overbox {
	display: none;
	position: absolute;
	left: 10%;
	width: 75%;
	height: 75%;
	z-index: 1002;
	overflow: auto;
	bottom: 10%;
}
#content {
	background: #FFFFFF;
	border: solid 5px #CCCCCC;
	padding: 10px;
}
</style>
</head>
<body>
<a href="javascript:void()" onClick="showLightbox('over');">Show LightBox</a>
<div id="over" class="overbox">
	<div id="content">
	Ventana creada con CSS<br />
	como ejemplo de <strong>Lightbox</strong>.<br /><br />
    hola mundo
	<a href="#footlight" onClick="hideLightbox('over');">Hide LightBox</a>
	</div>
</div>
<div id="fade" class="fadebox">&nbsp;</div>

</body>
</html>

No se si se pude adaptar para que se posicione en cualquier parte de la ventana?

muchas gracias de antemano por la ayuda

emiliodeg · #2 (**permalink**) 29/06/2009, 12:29

si sacas el scroll al contenido se soluciona, cuando llamas desde la funcion javascript podrias hacer un html, body{overflow:hidden} y de esta forma se soluciona tu problema

Mikmoro · #3 (**permalink**) 29/06/2009, 13:54

¿Y qué significa un "lightbox con css puro", con el código que muestras? Hay casi más líneas de javascript que de CSS. No entiendo a qué te refieres.

kseso? · #4 (**permalink**) 29/06/2009, 14:01

En http://www.cssplay.co.uk/menu/ tienes 2 "efectos tipo lightbox" sólo con css. Uno que se despliega con :hover y el otro al 'click'

pao01 · #5 (**permalink**) 29/06/2009, 14:10

Muy buena Kseso?, me viene genial sobre todo la del click. Gracias.

bacdavi · #6 (**permalink**) 30/06/2009, 21:21

pues muchas gracias amigos, resulta que el codigo javascript es la llamada a que se muestren los id's ocultos...
lo que necesito es que cuando tenga mucho contenido (la ventana del navegador usa scroll para bajar) en cualquier parte de la ventana del navegador se muestren esos campos que llamo con el javascript y no solo en la parte superior como actualmente lo hace

bacdavi · #7 (**permalink**) 30/06/2009, 21:44

Cita:

Iniciado por emiliodeg

si sacas el scroll al contenido se soluciona, cuando llamas desde la funcion javascript podrias hacer un html, body{overflow:hidden} y de esta forma se soluciona tu problema

Muchas gracias amigo pero fijate que al hacer esa instruccion en javascript se oculta todo y solo me queda el link q llama a la funcion! te pongo el codigo?

Código HTML:

<script language="javascript" type="application/javascript"> 
function showLightbox(valor) {
	document.getElementById(valor).style.display='block';
	document.getElementById('fade').style.display='block';
	document.body.style.overflow = "hidden";
}
function hideLightbox(value) {
	document.getElementById(value).style.display='none';
	document.getElementById('fade').style.display='none';
	document.body.style.overflow = "visible";
}
</script>

Alguna otra sugerencia?
muchas gracias