Foros del Web » Creando para Internet » CSS »

Ayuda con Lightbox en css puro

Estas en el tema de Ayuda con Lightbox en css puro en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/06/2009, 13:07
Avatar de bacdavi  
Fecha de Ingreso: junio-2006
Ubicación: http://localhost/
Mensajes: 351
Antigüedad: 11 años, 6 meses
Puntos: 7
Pregunta Ayuda con Lightbox en css puro

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
  #2 (permalink)  
Antiguo 29/06/2009, 13:29
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: Ayuda con Lightbox en css puro

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
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 29/06/2009, 14:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con Lightbox en css puro

¿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.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 29/06/2009, 15:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda con Lightbox en css puro

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'
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 29/06/2009, 15:10
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Ayuda con Lightbox en css puro

Muy buena Kseso?, me viene genial sobre todo la del click. Gracias.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #6 (permalink)  
Antiguo 30/06/2009, 22:21
Avatar de bacdavi  
Fecha de Ingreso: junio-2006
Ubicación: http://localhost/
Mensajes: 351
Antigüedad: 11 años, 6 meses
Puntos: 7
Respuesta: Ayuda con Lightbox en css puro

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
  #7 (permalink)  
Antiguo 30/06/2009, 22:44
Avatar de bacdavi  
Fecha de Ingreso: junio-2006
Ubicación: http://localhost/
Mensajes: 351
Antigüedad: 11 años, 6 meses
Puntos: 7
Pregunta Respuesta: Ayuda con Lightbox en css puro

Cita:
Iniciado por emiliodeg Ver Mensaje
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:06.