时间戳

首页 > 解决方案 > 多模式使用 - 错误

simplemodal - 多模式使用 - 错误

问题描述

我有一个客户希望他们的值图像包含一系列热点，以便单击每个值打开有关该值的视频。

我已经创建了响应式热点，除了左上角之外，它们暂时被涂成红色，以便您可以看到它们。每个热点都包含一个透明按钮，用于触发弹出窗口。热点最终都将是透明的，就像左上角的一样。

我尝试使用模态方法，它现在确实会生成弹出窗口，但是当单击左上角的值和右上角的红色热点时，它们都会触发相同的弹出窗口。我现在有点超出我的深度，因为我尝试以不同的方式命名模态，但没有成功。任何人都可以帮忙吗？

您可以在此处查看当前进度：http: //blend.accountants/map-b.html

标签： simplemodal

解决方案

可能最简单的解决方法就是这样：

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;

推荐阅读