Lightbox personalizado

Ver demo Descargar código

Lightbox es el efecto de oscurecer todo el contenido en nuestra interfaz a excepción de un único elemento que se busca destacar por sobre las demás cosas.

Maquetando la estructura base

Antes de ponernos a generar código HTML desde Javascript nos viene bien primero escribir a mano la estructura para tenerla de referéncia.

<div class="liwindow-container">
    <div class="lilightbox">
        <button type="button" class="lilightbox-close">×</button>
        <img src="https://picsum.photos/id/11/760/360">
    </div>
</div>

Usaremos un contenedor general (.liwindow-container) que sera el que oculte todo el demás contenido de la web mostrandose semiopaco.

Dentro pondremos el contenedor (.lilightbox) para los elementos de nuestro lightbox.

Primero ponemos el botón de cierre (.lilightbox-close) y después la imagen que buscamos resaltar por sobre el contenido.

Aplicando los estilos

/* -- liwindow -- */
.liwindow-container *,
.liwindow-container *::after,
.liwindow-container *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.liwindow-container {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 200;
}
.liwindow-hide{
    display: none;
}
/* -- lilightbox -- */
.lilightbox img {
  max-width: 100%;
  margin: 20px auto;
  display: block;
}
.lilightbox {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.lilightbox .lilightbox-close {
  font-size: 1.55rem;
  position: absolute;
  left: 0;
  top: 0;
  color: #e0e0e0;
  text-shadow: 0px 1px 2px #333;
  padding: 20px;
  display: inline-block;
  font-weight: bold;
  background-color: transparent;
  border: none;
  transition: 0.3s all;
}
.lilightbox .lilightbox-close:hover {
  color: #ffc107;
  background-color: transparent;
}

Aplicando estos estilos CSS anteriores a nuestra estructura HTML tendríamos la siguiente apariencia:

Definiendo las clases y métodos

/* -- Clase principal para el modal window -- */
class liwindow {
    constructor(html)
    
    show()
    
    hide()
    
    setContent()
    
    remove()
}
/* -- Image Lightbox -- */
class lilightbox {
}

Partiremos de una clase general con los métodos necesarios para el funcionamiento de nuestro lightbox.

Desde nuestra clase lightbox crearemos una instancia por cada imagen requerida.

Lógica de la clase principal

/* -- Ventana para lightbox y modal dialogs -- */
class liwindow{
    constructor(html){
        /* Creamos el contenedor principal del lightbox */
        this.container = document.createElement('div');
        this.container.setAttribute('class', 'liwindow-container liwindow-hide');
        this.container.addEventListener('click', this.hide);
        document.body.appendChild(this.container);

        /* Añadimos el html proporcionado */
        if (html != null) this.setContent(html);
    }

   /* Metodo para abrir lightbox */
    show = ()=> {
        this.container.classList.remove('liwindow-hide');
        document.body.style.overflow = 'hidden';
    }

    /* Metodo para cerrar lightbox */
    hide = ()=>{
        this.container.classList.add('liwindow-hide');
        document.body.style.overflow = 'auto';
    }
    
    /* Metodo para remover el lightbox y su contenido del html */
    remove = () => document.body.removeChild(this.container);

   /* Metodo para agregar contenido al lightbox */
    setContent = cont => this.container.innerHTML = cont;
}