JavaScriptyukipan

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

モーダルウィンドウ、idでページに一つだけ実装すると、複数設置したいときにモーダル開かない、、複数のときどうだったけ？といつも調べてるのでコピペで使えるようにメモしとく。

HTML

data-modal=”modal1″とid=”modal1″が対になっている。名前は何でもいいけど同じ名前にする。
modal-box内と.modalCloseを好きに調整。

<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>

SCSS

最大横幅640pxでセンター表示。最小90%でレスポンシブ対応。
.modal-boxと.modalCloseを好きに調整する。

.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

JavaScript

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";
  }
};

参考にさせてもらったサイト

JavaScriptの.querySelectorAll()で複数のモーダル

とてもわかりやすく解説してあります。ありがとうございます。