【JavaScript】複数のモーダル（modal)ポップアップ実装のメモ。

<button class="modalOpen" data-modal="modal1">モーダル1</button>
<button class="modalOpen" data-modal="modal2">モーダル2</button>

<div id="modal1" class="modal">
<div class="modal-box">
<p>ここにモーダル1のコンテンツが入ります</p>
<button class="modalClose">閉じる</button>
</div>
</div>

<div id="modal2" class="modal">
<div class="modal-box">
<p>ここにモーダル2のコンテンツが入ります</p>
<button class="modalClose">閉じる</button>
</div>
</div>

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  .modal-box {
    background-color: #fff;
    margin: 10% auto;
    max-width: 640px;
    width: 90%;
    border-radius: 10px;
    animation-name: modalopen;
    animation-duration: 1s;
    position: relative;
    .modalClose{
      position: absolute;
      top: 0;
      right: 0;
    }
  }//.modal-box
}//.modal

const modalBtns = document.querySelectorAll(".modalOpen");
modalBtns.forEach(function (btn) {
  btn.onclick = function () {
    var modal = btn.getAttribute('data-modal');
    document.getElementById(modal).style.display = "block";
  };
});
const closeBtns = document.querySelectorAll(".modalClose");
closeBtns.forEach(function (btn) {
  btn.onclick = function () {
    var modal = btn.closest('.modal');
    modal.style.display = "none";
  };
});

window.onclick = function (event) {
  if (event.target.className === "modal") {
    event.target.style.display = "none";
  }
};

<div class="gallery-list grid x3">
<div class="modalOpen" data-modal="modal1">
<img src="assets/images/loop/loop_01.jpg" alt="">
</div>
<div class="modalOpen" data-modal="modal2">
<img src="assets/images/loop/loop_02.jpg" alt="">
</div>
<div class="modalOpen" data-modal="modal3">
<img src="assets/images/loop/loop_03.jpg" alt="">
</div>
</div>

<div id="modal1" class="modal">
<div class="modal-wrap">
<div class="modal-box">
<div class="modal-close-btn modalClose" aria-label="閉じる"><span class="lineClose"></span></div>
<div class="modal-thum">
<img src="assets/images/loop/loop_01.jpg" alt="">
</div>
</div>
</div>
</div>

<div id="modal2" class="modal">
<div class="modal-wrap">
<div class="modal-box">
<div class="modal-close-btn modalClose" aria-label="閉じる"><span class="lineClose"></span></div>
<div class="modal-thum">
<img src="assets/images/loop/loop_02.jpg" alt="">
</div>
</div>
</div>
</div>

<div id="modal3" class="modal">
<div class="modal-wrap">
<div class="modal-box">
<div class="modal-close-btn modalClose" aria-label="閉じる"><span class="lineClose"></span></div>
<div class="modal-thum">
<img src="assets/images/loop/loop_03.jpg" alt="">
</div>
</div>
</div>
</div>

.modalOpen{
  cursor: pointer;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  .modal-wrap{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .modal-box {
    background-color: var(--c-font);
    padding: 15px;
    max-width: 800px;
    width: 90%;
    animation-name: modalopen;
    animation-duration: 1s;
    position: relative;
    .modal-thum{
      width: 100%;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }
    .modalClose{
      position: absolute;
      top: 0;
      right: 0;
    }
  }//.modal-box
  /* 閉じるボタン */
  .modal-close-btn {
      position: absolute;
      right: -5px;
      top: -5px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      z-index: 20;
      &:hover {
          opacity: .8;
      }
  }
  /* 閉じるボタンのX */
  .lineClose {
      display: inline-block;
      vertical-align: middle;
      color: var(--c-white);
      line-height: 1;
      width: 2rem;
      height: .2rem;
      background: currentColor;
      border-radius: 0.1rem;
      position: relative;
      transform: rotate(45deg);
  }
  .lineClose::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);
  }
}//.modal

.grid{
  display: grid;
  gap: 30px 20px;
  &.x3{
    @include mq(tb) {
      grid-template-columns: repeat(3, 1fr);
    }
  }//&.x3
}