使用 HTML 和 Javascript 的模态

Answer 1

看起来您只有一个带有

id="close"

的关闭按钮，并且您将相同的引用传递给

itemModal

函数。

解决这个问题的一个简单方法是在

itemModal

函数中查找关闭按钮。在这种情况下，您不需要将其传递到外面，您的模态框将选择位于模态框本身内部的一个。这是一个例子：

const seeModal = document.getElementById("seeModal");
const hearModal = document.getElementById("hearModal");

const seeBtn = document.getElementById("seeBtn");
const hearBtn = document.getElementById("hearBtn");

itemModal = function(modal,open){
  var modal;
  var open;
  var close = modal.querySelector('.close');
  open.addEventListener("click", function(){modal.style.display = "block";});
  close.onclick = function(){modal.style.display = "none";};
}

itemModal(seeModal,seeBtn);
itemModal(hearModal,hearBtn);