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.
<div id="over" class="overbox">Contenido Lightbox</div> <div id="fade" class="fadebox"> </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.
.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.
<a href="javascript:showLightbox();">Show LightBox</a> <a href="javascript:hideLightbox();">HideLightBox</a>
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 31 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.
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
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
Publicado: 23/02/2012 1:54 pm
gracias men ,esa es buena programacion , facil y sencillo,
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?????
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!
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
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.
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 (:
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.
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.
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! ;)
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???
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!