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

如何使用多个按钮打开模态？

1 个答案: