Модальное окно - html + css + javascript

let Modal = document.querySelector('#modal'), // В переменную "шаблон" модалки
  ModalContentBlock = Modal.querySelector('.modal__block'), // Там где хранится контент
  ModalContent;

document.addEventListener('click', function(e) { // Делаем делигированное событие по клику
  if(e.target.tagName === 'A') { // Определяем, является ли нажатое элементом A (ссылка), если да, то..
    ModalContent = document.querySelector(e.target.getAttribute('href')) || false; // Т.к. в ссылке мы передаём id, то будем искать такой элемент, || false - если что-то не так - false

    if(ModalContent !== false // Если не false
    && ModalContent.classList.contains('modal__content')) { // И содержит в себе класс modal__content => значит это точно модалка
      e.preventDefault(); // И первым действием мы отменяем переход по ссылке, т.к. запись у нас является якорем.
      //

      document.body.style.overflow = 'hidden'; // Уберём прокрутку body
      ModalContentBlock.append(...ModalContent.children); // Переместим контент в модалку
      Modal.style.display = 'block'; // покажем модалку.
    } else ModalContent = '';
  }

  // А тут закрытие модалки
  if(Modal.contains(e.target) && e.target !== ModalContentBlock && !ModalContentBlock.contains(e.target) // Тут проверяем произошёл ли клик вне контента
  || e.target.classList.contains('--modal__close')) { // А тут произошёл ли клик по кнопке
    document.body.style.overflow = ''; // Возвращаем скролл body
    Modal.style.display = ''; // Скрываем модалку // Тут лучше делать анимацю закрытие
    if(ModalContent) ModalContent.append(...ModalContentBlock.children); // Вовращаем контент обратно
  }
});

.modal__content-hidden {
  display: none;
}

.modal__overlay {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .75);
  overflow: hidden auto;
  padding: 50px;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.modal__wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 320px;
  width: 100%;
  max-width: 700px;
  min-height: 100%;
  margin: 0 auto;
}

.modal__block {
  display: block;
  width: 100%;
  min-height: 100px;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  position: relative;
}

.modal__btn-close {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.modal__btn-close::before,
.modal__btn-close::after {
  content: '';
  display: block;
  width: 16px;
  height: 2px;
  background: #000;
  position: absolute;
  left: 50%;
  top: 50%;
}

.modal__btn-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__btn-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal__btn-close:hover::before,
.modal__btn-close:hover::after {
  background: #f00;
}

<!-- Ссылка для открытия модалки -->
<a href="#photos">Открыть модалку с фото</a>

<!-- Тут будем прятать модалки, чтобы не клонировать их, а просто переносить -->
<div class="modal__content-hidden">
  <!-- Это основной контент модалки, его будем подставлять в "шаблон", шаблон будет вставляться по #id из ссылки открытия.
href="#photos" в нашем случае -->
  <div id="photos" class="modal__content">
    <img src="//picsum.photos/100/100?1" />
    <img src="//picsum.photos/100/100?2" />
    <img src="//picsum.photos/100/100?3" />
    <img src="//picsum.photos/100/100?4" />
    <img src="//picsum.photos/100/100?5" />
    <img src="//picsum.photos/100/100?6" />
    <img src="//picsum.photos/100/100?7" />
    <img src="//picsum.photos/100/100?8" />

    <div style="align-text:center">
      <button class="--modal__close">Закрыть окно</button>
    </div>
  </div>
</div>

<!-- "Шаблон" модалки, чтобы не плодить их -->
<div id="modal" class="modal__overlay">
  <div class="modal__wrap">
    <div class="modal__block">
      <!-- Кнопка закрытия по классу, чтобы вставлять свои в контент -->
      <div class="modal__btn-close --modal__close"></div>
    </div>
  </div>
</div>