Lightbox es un script muy popular del cual hemos comentado en Lightbox: imágenes Emergentes que permite mostrar imágenes y contenido en ventanas que se superponen sobre todo el web. Este script y otros que tienen la misma funcionalidad están basados en frameworks Javascript, esta vez crearemos el efecto Lightbox pero sin necesidad de scripts adicionales.
Un poco de teoría
Esta técnica fue originalmente explicada en Create a Lightbox effect only with CSS - no javascript needed en donde se explica que este efecto de mostrar un div que sobreponga todo el html, se puede conseguir con dos divs, uno de los cuales servirá para obscurecer todo el contenido del web y se mostrará en el 100% de la pantalla y el segundo en donde se mostrará el contenido deseado.
Creando el Lightbox
Entonces para crear nuestro Lightbox, creamos un html en donde incluimos dos divs que utilizamos para el efecto deseado.
El siguiente paso es crear los estilos para estos dos elementos, para ello creamos dos estilos: fadebox que se muestra en toda la pantalla con color de fondo negro al 80% de opacidad y overbox que se muestra en medio de la pantalla, estos dos elementos están inicialmente ocultos.
-
.fadebox {
-
display: none;
-
position: absolute;
-
top: 0%;
-
left: 0%;
-
width: 100%;
-
height: 100%;
-
background-color: black;
-
z-index:1001;
-
-moz-opacity: 0.8;
-
opacity:.80;
-
filter: alpha(opacity=80);
-
}
-
.overbox {
-
display: none;
-
position: absolute;
-
top: 25%;
-
left: 25%;
-
width: 50%;
-
height: 50%;
-
z-index:1002;
-
overflow: auto;
-
}
El siguiente paso es crear los botones para mostrar/ocultar el lightbox, para ello creamos dos enlaces que llamarán a dos funciones javascript, estas funciones simplemente cambiarán los estilos asociados a los dos divs para mostrarlo u ocultarlo.
-
function showLightbox() {
-
document.getElementById('over').style.display='block';
-
document.getElementById('fade').style.display='block';
-
}
-
function hideLightbox() {
-
document.getElementById('over').style.display='none';
-
document.getElementById('fade').style.display='none';
-
}
Unimos estos elementos ya ya tenemos nuestro Lightbox funcionando, pueden ver el ejemplo funcionando en CSS Lightbox en donde hemos agregado una estilo adicional al contenido mostrado en la ventana emergente para darlo un fondo blanco, borde y margen.
Mejorando el Lightbox
Ahora esta funcionalidad es muy básica, se le podría agregar la posibilidad de definir las dimensiones de la ventana, para ello haría falta calcular el tamaño de la pantalla y según ello posicionarla. Otro de los adicionales que podríamos hacer es que cuando se haga click fuera de la ventana emergente se cierre el Lightbox, esto se hace agregando un detector de eventos para el click. Otra posibilidad es agregarle un efecto de transición al momento de mostrar la ventana.
Comentarios Total 18 comentarios
Publicado: 23/10/2008 5:13 am
De todos los que he probado el que mejores resultados me ha dado es Shadowbox.
Es completísimo en cuanto a formatos que soporta, y muy usable (teclado, click fuera para cerrar…)
Publicado: 23/10/2008 7:00 pm
Muy interezante para los que buscamos alternativas a lo comun y queremos personalizarlo todo!!!! jajaja
Publicado: 24/10/2008 3:31 pm
tengo una pregunta.. como hago para que se lanze automatico el lightbox en una pagina web??
osea que la gente no le tenga ke dar click en el boton show lightbox
Publicado: 09/11/2008 2:36 am
@exactlimon
Cambiá la propiedad display de ‘none’ a ‘block’
Me encanto el efecto…solo una pequeña correción…cambiando el position a ‘fixed’ en .fadebox el fondo ocupa siempre el 100% de la pagina..por si nos excedemos en el alto.
Saludos! (muy buen blog)
Publicado: 09/11/2008 1:29 pm
[...] Autor: Efecto Lightbox con CSS(unijimpe.net) [...]
Publicado: 12/02/2009 2:18 pm
esta muy bien, pero al final necesitas java para hacer los cambios de estilo, con lo que estamos en las mismas (más o menos)
Publicado: 14/02/2009 10:34 pm
Lo que hacen este par de lineas javascript es solamente modificar los estilos de los DIVs pero no se hace ningún calculo o efecto con javascript.
Publicado: 13/03/2009 12:41 am
no se si puedan contestarme una duda sobre este codigo… lo estoy usando en una pagina para poner varias noticias y que cada noticia muestre su ventana emergente… pero al momento de agregar la segunda noticia con el mismo codigo me repite la misma noticia anterior… no se mucho de codigo y quisiera me ayudaran…
gracias!!!!
Publicado: 23/03/2009 3:24 pm
Excelente, me haz ayudado mucho :D
Publicado: 12/06/2009 2:38 pm
como hago para colocar la ventana emergente en el centro de la pantalla ya que en IE sale en la parte superior y en FF en cualquier lado de la mitar hacia abajo ,saludos , muy buena data
Publicado: 09/08/2009 2:11 pm
Rnace dijo:
esta muy bien, pero al final necesitas java para hacer los cambios de estilo, con lo que estamos en las mismas (más o menos)
Unijimpe respondió:
Lo que hacen este par de lineas javascript es solamente modificar los estilos de los DIVs pero no se hace ningún calculo o efecto con javascript.
Maicro duda ;) Buenas. Gracias por el tutorial. Referente a lo que ha dicho Rnace, ese código de Java, una vez colgado en el servidor, ¿no hace saltar la alarma de ejecución de Script del navegado?
Cuando ejecuto una copia de tu código en mi ordenador, me sale la alarma, pero en el ejemplo que muestras, no.
Muchas gracias. Saludos.
Publicado: 16/08/2009 1:44 pm
necesito hacerle una pregunta ¿cómo hago para cerrar esta “ventana modal” desde afuera es decir que yo le haga clic en la ventana semitransparente y automáticamente me cierre el cuadro de texto o que también pueda hacer clic dentro de cualquier parte del cuadro y me cierren automáticamente.
agradeciéndole mucho su pronta respuesta colaboración
Publicado: 16/09/2009 4:01 pm
[...] Fuente principal de información [...]
Publicado: 20/09/2009 4:19 am
Mi pregunta es la misma que la de Fernando, como puedo cerrar la ventana haciendo click en cualquier parte de la pantalla.
Saludos y gracias.
Publicado: 26/11/2009 2:55 pm
Porque este efecto me presenta problemas al verlo en explorer y dejarlo en “block”…. lo que causa que no se vea la imagen…alguien tiene algún datito!..gracias!
Publicado: 22/03/2010 11:43 pm
Interesante, pero son malas prácticas de código…
Publicado: 09/04/2010 1:42 pm
Que buen post.. Graxias para el autor y sn4k3 por el aporte.
Mejorando un poco..
Para cerrar la ventan ya sea en el cudro de dialogo en cualquier otra parte de la ventana solo agregue el evento onclick en ambos divs
onclick=”javascript:hideLightbox();”
Publicado: 18/06/2010 12:34 pm
el codigo me gusto, pero en el ie no me funciona bien, ya que me correo todo el sitio hacia abajo en lugar de quedar sobre el sitio, si ese lo pruebo desde firefox funciona bien aunque si ajusto que en el ie se vea sentrado por medio de css en el firefox no queda centrado.