Zenn
Open1

【JS】複数のモーダル

JavaScript
初心者
プログラミング初心者
トミートミー

ボタンが複数あって、各ボタンをクリックするとそのボタンに紐づいたモーダルを表示することに大苦戦。
でも、なんとか、なんとか、動いた――――――！！！

codepen

js

modals.js
const modals = document.querySelectorAll('.modal');
const modalOpenTriggers = document.querySelectorAll('.modal-open');
const modalCloseTriggers = document.querySelectorAll('.modal-close');

modalOpenTriggers.forEach(function (modalOpenTrigger) {
  modalOpenTrigger.addEventListener('click', function () {
    const modalCheck = modalOpenTrigger.dataset.modalOpen;
    modals.forEach(function (modal) {
      if (modalCheck === modal.id) {
        modal.showModal();
      }
    });
  });
});

modalCloseTriggers.forEach(function (modalCloseTrigger) {
  modalCloseTrigger.addEventListener('click', function () {
    modals.forEach(function (modal) {
      modal.close();
    });
  });
});

うれしい。。。
でも、背景を固定させるなどなどの機能を足していきたい。