自作modal最新版（写真、テキストなど）

<div class="js--modal-open" data-target="modal01">クリック1</div>
<div class="js--modal-open" data-target="modal02">クリック2</div>

<!-- data-targetで紐付けた内容 idで管理 -->
<div id="modal01" class="modal js--modal">
  <div class="modal__bg js--modal-close"></div>
  <div class="modal__content">
    <p>1つ目モーダルウィンドウです。</p>
    <div class="modal__close-btn js--modal-close"></div>
  </div>
</div>

<div id="modal02" class="modal js--modal">
  <div class="modal__bg js--modal-close"></div>
  <div class="modal__content">
    <p>2つ目モーダルウィンドウです。</p>
    <div class="modal__close-btn js--modal-close"></div>
  </div>
</div>

// modal（写真など）
// ==============================
document.addEventListener("DOMContentLoaded", function () {
  let scrollPosition = 0;

  document.querySelectorAll(".js--modal-open").forEach(button => {
    button.addEventListener("click", function (event) {
      event.preventDefault();
      scrollPosition = window.scrollY;
      document.body.classList.add("fixed");
      document.body.style.top = `-${scrollPosition}px`;

      let targetId = this.dataset.target;
      let modal = document.getElementById(targetId);
      if (modal) {
        modal.classList.add("is--visible");
      }
    });
  });

  document.querySelectorAll(".js--modal-close").forEach(closeButton => {
    closeButton.addEventListener("click", function () {
      document.body.classList.remove("fixed");
      document.body.style.top = "";
      window.scrollTo(0, scrollPosition);

      document.querySelectorAll(".js--modal").forEach(modal => {
        modal.classList.remove("is--visible");
      });
    });
  });
});

// モーダルを開いたときのスクロール固定
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}

// モーダルの基本スタイル
.modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &.is--visible {
    opacity: 1;
    visibility: visible;
  }
}

// モーダル背景（黒の半透明オーバーレイ）
.modal__bg {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

// モーダルのコンテンツ（ウィンドウ）
.modal__content {
  box-sizing: border-box;
  background: #fff;
  padding: 45px;
  position: relative;
  width: 90%;
  max-width: 113rem;
  max-height: 80vh;
  min-height: 400px;
  border-radius: 8px;
  overflow: auto;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);

  // 画面中央に配置
  // transform: translateY(-50%);
  // top: 50%;
}

// 閉じるボタン
.modal__close-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 15px;
  right: 15px;
  cursor: pointer;

  &:before,
  &:after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
  }

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

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

  // ホバー時のスタイル
  &:hover {
    opacity: 0.7;
  }
}