Многократное модальное использование - ошибка

Question

У меня есть клиент, который хочет, чтобы изображение их значений содержало серию «горячих точек», поэтому при нажатии на каждое значение открывается видео об этом значении.

Я создал отзывчивые горячие точки, которые временно окрашены в красный цвет, чтобы вы могли видеть их, кроме верхнего левого. Каждая горячая точка содержит прозрачную кнопку, чтобы вызвать всплывающее окно. Все горячие точки в конечном итоге будут прозрачными, как в верхнем левом углу.

Я попытался использовать модальный подход, который теперь генерирует всплывающее окно windows, но при нажатии на верхнее левое значение и вверху справа красная горячая точка, они оба вызывают одно и то же всплывающее Сейчас я немного не в себе, потому что я пытался по-другому называть модалы, но безуспешно. Может кто-нибудь помочь, пожалуйста.

Вы можете просмотреть текущий прогресс здесь: http://blend.accountants/map-b.html

Answer 1

Вероятно, самое простое исправление заключается в следующем:

btn.onclick = function() {
  document.getElementById("myModal").style.display = "block";
}

Затем позже:

btn.onclick = function() {
  document.getElementById("myModal2").style.display = "block";
}

Проблема в том, что при использовании modal непосредственно в обратном вызове код просто забирает код последний использованный глобальный экземпляр; здесь мы явно ищем каждый элемент.

Другой способ, который позволяет вам просто иметь одну onclick функцию для каждой кнопки:

function displayModal() {
  document.getElementById(this.id).style.display = "block";
}

btn.onclick = displayModal;