多模态使用 - Bug

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;