Как я могу добавить кнопку закрытия в лайтбокс? так что я могу закрыть изображение с кнопки вместо того, чтобы щелкнуть в любом месте в лайтбоксе

Question

Я использую этот простой лайтбокс, но я хочу сделать его немного более продвинутым, добавив кнопку закрытия в правом углу.

, поэтому, когда он показывает изображение в лайтбоксе, я могу закрыть его с помощью кнопки. кнопка закрытия вместо щелчка в любом месте лайтбокса, чтобы закрыть изображение.

const lightbox = document.createElement('div')
lightbox.id = 'lightbox'
document.body.appendChild(lightbox)

const images = document.querySelectorAll('.columnimg')
images.forEach(columnimg => {
  columnimg.addEventListener('click', e => {
    lightbox.classList.add('active')
    const img = document.createElement('img')
    img.src = columnimg.src

    while (lightbox.firstChild) {
      lightbox.removeChild(lightbox.firstChild)
    }
    lightbox.appendChild(img)
  })
})

lightbox.addEventListener('click', e => {
  if (e.target !== e.currentTarget) return
  lightbox.classList.remove('active')
})

<style><!--

  #lightbox {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    display: none;
  }

  #lightbox.active {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #lightboximg {
    max-width: 90%;
    max-height: 80%;
    padding: 4px;
    background-color: black;
    border: 2px solid white;
    }
.rowimg{

}
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

--></style>

<div class="rowimg">
  <img class="columnimg "src="https://upload.wikimedia.org/wikipedia/commons/e/e0/SNice.svg"">
</div>