Efecto Lightbox con CSS

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.

  1. <div id="over" class="overbox">Contenido Lightbox</div>
  2. <div id="fade" class="fadebox">&nbsp;</div>

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.

[css]
.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;
}
[/css]

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.

  1. <a href="javascript:showLightbox();">Show LightBox</a>
  2. <a href="javascript:hideLightbox();">HideLightBox</a>
  1. function showLightbox() {
  2.     document.getElementById('over').style.display='block';
  3.     document.getElementById('fade').style.display='block';
  4. }
  5. function hideLightbox() {
  6.     document.getElementById('over').style.display='none';
  7.     document.getElementById('fade').style.display='none';
  8. }

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 35 comentarios


Andros
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…)

Matias
Publicado: 23/10/2008 7:00 pm

Muy interezante para los que buscamos alternativas a lo comun y queremos personalizarlo todo!!!! jajaja

exactlimon
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

5n4K3
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)


[…] Autor: Efecto Lightbox con CSS(unijimpe.net) […]

rnace
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)

unijimpe
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.

ruso
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!!!!

Gastón
Publicado: 23/03/2009 3:24 pm

Excelente, me haz ayudado mucho :D

Pablo
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

Maicro
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.

Fernando
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

Lightbox usando CSS « Blog de diseño web
Publicado: 16/09/2009 4:01 pm

[…] Fuente principal de información […]

Daniel
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.

Jessica
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!

Jepser
Publicado: 22/03/2010 11:43 pm

Interesante, pero son malas prácticas de código…

raijev
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();”

rodrigo arnaiz
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.

Raulparra
Publicado: 26/08/2011 2:37 pm

Me funciono 100% muchas gracias me parece muy bueno q comparten esto lo mejor es solamente se utilizo java muy poco

axel
Publicado: 27/09/2011 10:56 am

hola a todos es justo lo que anduve buscando pero le falta algo no se si me puedan ayudar yo quiero que salgo automáticamente el lightbox pero una sola por cada visita al entrar a mi web para que no moleste mucho a los usuarios bueno espero me entiendan y tambien espero su apoyo .. gracias unijimpe eres el mejor siempre te leo

Alejandro Garcia
Publicado: 23/02/2012 1:54 pm

gracias men ,esa es buena programacion , facil y sencillo,

Jorge
Publicado: 25/04/2012 6:27 am

Por favor, me gustaria saber como se puede hacer para que tener una limite maximo en el tamaño de la imagen, sea cual sea la imagen que le metas?????

anabella
Publicado: 27/05/2012 12:44 pm

que tal, tengo una html con diferentes botones para mostrar diferentes precios, cada uno ren su lightbox, el tema es que no se como linkear cada lightbox con su link correspondiente, me podrias ayudar?

gracias!

Fredy
Publicado: 18/09/2012 2:37 pm

Hola buenas tardes

Respecto a este efecto, como puedo ponerlo al cargar la pagina y que se muestre un video

Jesus
Publicado: 04/03/2013 9:03 pm

Bien use tu codigo y me funciona pero en una foto, cuando quiero usarlo en mas fotos, me termina jalando solo la primera que pongo en todas las demás como hago para solucionar este problema.

Isa
Publicado: 07/05/2013 2:00 pm

Buenas tardes.

Se que ya se ha preguntado, pero… ¿cómo hay que hacer para que al pulsar fuera del lightbox éste se cierre?

Gracias por el tutorial (:

jorge
Publicado: 28/04/2014 4:21 am

Alguien me puede decir como usar el efecto dentro de la misma pagina con firentes imagenes o texto o sea varias veces pero con diferente info.

Frank
Publicado: 11/06/2014 2:39 pm

Hola, intente usar este código con varias opciones, pero siempre me sale la primera opción. Necesitaria saber como hacerlo para que funciones con varias posibilidades. Un saludo.

Carlos Diaz
Publicado: 26/08/2014 12:00 pm

Está genial pero hay una pequeña pega, el div que contiene el texto hereda la transparencia.
Si en vez de:
background-color: black;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);

Pones solo:
background-color: rgba(0, 0, 0, 0.8);

Te ahorras varias lineas de código para conseguir lo mismo y para que funcione en otros navegadores. Además de conseguir que los demás divs que se tengan que ver como principal no hereden la propiedad de transparencia.

De nada! ;)

jorge
Publicado: 27/09/2014 7:43 pm

hola soy nuevo en esto… alguien me puede ayudar yo quiero hacer uno que diga contacto y otro que diga quienes somos pero no se como generar otro que paso tengo que hacer???

Mariano
Publicado: 11/05/2015 7:12 pm

Buenas, buen efecto!

Voy a dejar un par de cosas, ya que a apartir de este código estuve investigando algunas cosas para que funcione bien.

Para lograr que el fondo oscuro no se corte al scrollear, y que la ventana modal (popup) se abra siempre, independientemente de que sector de la web estemos debemos cambiar la position a “fixed” en ambas clases (.fadebox y .overbox).

Para lograr que cierre la ventana cliqueando en cualquier parte de la pantalla debemos agregar en ambos divs (id=”content” y “fade”) el atributo onclick=”javascript:hideLightbox();”

Para aplicar el efecto a diferentes links dentro de un mismo sitio, no encontré la mejor forma de hacerlo. La que yo hice y funciono es duplicando las funciones de js, que llaman a los divs content y face.. y le pongo a todo el número 2 al final como para que me llame ese contenido.
Y volver a duplicarlo para un 3er link, y así…

Saludos!

Cristian
Publicado: 14/08/2015 4:02 pm

Agregue onclick=”javascript:hideLightbox();” pero no funciona, puede haber algun detalle mas a tener en cuenta? Lo hice sobre la versión limpia del archivo que baje de aca y no lo logré. Saludos

Cristian
Publicado: 14/08/2015 4:37 pm

Bueno lo solucione de manera parcial, agregue una imagen de 1px transparente y le puse el link

Iván
Publicado: 08/01/2016 6:25 am

Cristian, ya ha pasado un tiempo desde que escribiste pero recién encuentro este artículo.
A mi me pasó lo mismo y lo que encontré son las comillas diferentes (por lo menos a mi me funciona así).
onclick=”javascript:hideLightbox();” – copiando desde esta web
onclick=”javascript:hideLightbox();” – las comillas del teclado

Ahora una consulta: ¿es posible que este efecto aparezca de manera automática al ingresar a un sitio web y después de ciertos segundos se desaparezca?

Gracias y Saludos.

Iván
Publicado: 08/01/2016 6:27 am

Corrijo: las comillas que muestra acá al postear son diferentes que las que se ponen con el teclado (por ejemplo en el notepad).
Lo que sí me ha funcionado es cambiar las comillas que pegué al copiarlas desde esta web por las que están “arriba” del número 2 del teclado.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)