Создание нескольких модальных окон

Пытаюсь создать несколько модальных уведомлений. Вот этим кодом. На одной кнопке это работает, но добавляю на несколько ни какой реакции Результат: должно получиться, при нажатии на любую из кнопок появление одной и той же картинки.С возможность закрыть это окно ![шаблон] (https://www.figma.com/design/JTSdN2Edk2R5DsvDPzc4WQ/Untitled?node-id=0-1&m=dev&t=3KE6sCoI3LT9dPwm-1)

<button class="button" type="button" onclick="window.myDialog.showModal()">
  Start Free Trial
</button>
<dialog id="myDialog">
  <img src="./images/subscription.jpg" alt="subscription">
  <form method="dialog">
    <button>
      Отменить подписку
    </button>
  </form>
</dialog>


Ответы (1 шт):

Автор решения: ksa

Результат: должно получиться, при нажатии на любую из кнопок появление одной и той же картинки.С возможность закрыть это окно !

Все три кнопки будут вызывать, нужную тебе, модалку...

 document.querySelector('section').addEventListener('click', e => {
  if (!e.target.closest('.button')) return
  myDialog.showModal()
 })
 
<section>
  <button class="button" type="button">
    Start Free Trial 1
  </button>
  <button class="button" type="button">
    Start Free Trial 2
  </button>
  <button class="button" type="button">
    Start Free Trial 3
  </button>
</section>
<dialog id="myDialog">
  <img src="./images/subscription.jpg" alt="subscription">
  <form method="dialog">
    <button>
      Отменить подписку
    </button>
  </form>
</dialog>

→ Ссылка