jquery - 同一页面上的多个模态

Question

我试图在一个页面上触发多个模式，同时提取每个模式的正确内容。我确信这与区分 id 或类有关，只是无法弄清楚。感谢您的帮助。

这是触发模式的代码，我只是对如何使其特定于每个链接感到困惑。 JSFiddle 链接如下

var modal = document.getElementById('myModal_1');

var btn = document.getElementById("modal_1");

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

模态2的内容

// Get the modal
var modal = document.getElementById('myModal_2');

// Get the button that opens the modal
var btn = document.getElementById("modal_2");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

https://jsfiddle.net/o4vohxr4/

Answer 1

看看你的 fiddle ，问题是你正在覆盖你自己的变量。

对于两个事件处理程序，您都使用vars、modal、btn和span。由于模态 2 是稍后设置的，因此它的 modal 值用于两个按钮。

此外，document.getElementsByClassName("close")[0] 每次都会获取第一个 close 类元素，这就是 X 的原因code> 不适用于模态 2，因为两个事件处理程序都试图隐藏模态 1。

当它们位于同一范围内时，您需要使用唯一的变量名称，并记住像 document.getElementsByClassName 这样的文档级命令将始终从顶部开始。

此外，您还可以分配 window.onclick 两次，第二次覆盖第一次。

这里是一个快速的最小编辑以获得您想要的功能，但请考虑一下比我在这里使用的更好的变量命名。

// Get the modal
var modal = document.getElementById('myModal_1');

// Get the button that opens the modal
var btn = document.getElementById("modal_1");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}



// Get the modal
var modal2 = document.getElementById('myModal_2');

// Get the button that opens the modal
var btn2 = document.getElementById("modal_2");

// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[1];

// When the user clicks the button, open the modal
btn2.onclick = function() {
  modal2.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
  modal2.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal || event.target == modal2) {
    event.target.style.display = "none";
  }
}