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

看着你的小提琴，问题是你要覆盖自己的变量。

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

此外，document.getElementsByClassName("close")[0]每次都会获得第一个close类元素，这就是X无法在modal 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";
  }
}

同一页面上的多个模态

1 个答案: