A very simple zero dependency lightbox.

dead-simple-lightbox.js

const css = document.createElement('style')
css.type = 'text/css'
css.innerHTML = `
  .dead-simple-lightbox + * {
    display: none;
  }

  .dead-simple-lightbox-container {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .dead-simple-lightbox-container div {
    display: inline-block;
    position: absolute;
    top: 40%;
    right: 50%;
    transform: translate(50%, 50%);
    background-color: white;
  }

  .dead-simple-lightbox-container.open {
    display: block;
  }
`
document.head.appendChild(css)

const container = document.createElement('div')
container.classList.add('dead-simple-lightbox-container')
document.body.append(container)
const content = document.createElement('div')
container.append(content)

const triggers = document.querySelectorAll('.dead-simple-lightbox')
for (const trigger of triggers) {
  trigger.addEventListener('click', e => {
    const clone = trigger.nextElementSibling.cloneNode(true)
    clone.classList.remove('dead-simple-lightbox')
    content.append(clone)
    container.classList.add('open')
  })
}