javascript - 如何使用多个按钮打开模式？

Question

我有一个模式，我想用多个按钮打开它。

第一个按钮(在“Diamont Packet”中)起作用，这会打开模式，但其他按钮不起作用。按钮的id都命名为id="detail"。

如何让它工作所有的按钮，videlicet所有的按钮打开模态？

这是我的完整代码 https://jsfiddle.net/hxhjyhpv/1/ .

这是我的js代码:

var modal = document.getElementById('modal');
var btn = document.getElementById("detail"); 
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Answer 1

ID 在页面上应该是唯一的。只需添加一些类，然后使用 document.querySelectorAll 获取按钮数组，就可以开始了。

查看我更新的 jsfiddle here .

var modal = document.getElementById('modal');
var btns = document.querySelectorAll('.pack.detail'); 
var span = document.getElementsByClassName("close")[0];

[].forEach.call(btns, function(el) {
  el.onclick = function() {
      modal.style.display = "block";
  }
})
span.onclick = function() {
    modal.style.display = "none";
}
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}