如何使用多個按鈕打開模式？

Question

我有一個模態，我想用多個按鈕打開它。

第一個按鈕（在“ Diamont Packet”中）起作用，這將打開模態，但其他按鈕不起作用。 按鈕的id都命名為id="detail" 。

如何使所有按鈕正常工作，如何使所有按鈕打開模式？

這是我的完整代碼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。

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";
    }
}