Efecto Lightbox con css + javascript

Lightbox es un script desarrollado con javascript que nos permite abrir ventanas emergentes con más estilo que las habituales popup. Como esta librería existen muchísimas mas, como por ejemplo la lightview.
Bueno pero este no es el punto principal, vía unijimpe me encuentro con la posibilidad de nosotros poder "desarrollar" nuestra propia lightbox. Porque por medio de css más un simple mostrar y ocultar divs podemos hacer el efecto para que se abra una ventana emergente. Obviamente este código no cuenta con algunos efectos que tienen la ya nombrar lightbox, pero nos puede servir para nosotros darle el estilo que queramos a la popup que se abra.

Ahora vamos a ver el código para generar nuestra lightbox:
1 - Creamos un nuevo documento html, e insertamos estas divs.

PLAIN TEXT
  • id="over" class="overbox">Contenido Lightbox
  • id="fade" class="fadebox">

2 - Esta paso es uno si no el mas importante de todos, vamos aplicar el estilo css a las divs que creamos en el paso anterior.

PLAIN TEXT
  • .fadebox
  • display: none;
  • 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);
  • {

  • display: none;
  • position: absolute;
  • top: 25%;
  • left: 25%;
  • width: 50%;
  • height: 50%;
  • z-index:1002;
  • overflow: auto;
  • }

Ahora lo que tenemos que hacer es crear los 2 botones para mostrar y otro para ocultar la ventana. Para esto vamos a colocar el sitio código html y también crear dos funciones javascript para que ejecuten la acción de mostrar/ocultar.

PLAIN TEXT
  • href="javascript:showLightbox();">Show LightBox
  • href="javascript:hideLightbox();">HideLightBox

PLAIN TEXT

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';
  • }

document.getElementById('fade').style.display='block';
}
function hideLightbox (){
  document.getElementById('over').style.display='none';
  document.getElementById('fade').style.display='none';

}

Luego de que juntemos todo este código en nuestro archivo html nos tendría que quedar algo como este demo.

Etiquetas: , ,

btemplates