Javascript 模态工作，直到复制

我创建了一个javascript模式，它运行良好，除非页面上有2个。当页面上存在其中两个时，第一个将起作用，但下一个现在起作用

下面是控制它的JS：

// Get the button that opens the modal
let trigger = document.getElementsByClassName("js-modal")[0];
trigger.onclick = function() {
  modal.style.display = "block";
};

// Get the modal linked with with trigger element
let modal = document.getElementById(
  trigger.href.substring(trigger.href.indexOf("#") + 1)
);

// When the user clicks the button, open the modal
let allClose = modal.getElementsByClassName("js-modal-close");


// All elments linked to the modal can close the modal
for (let i = 0; i < allClose.length; i++) {
  allClose[i].onclick = function() {
    modal.style.display = "none";
  };
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(e) {
  if (e.target == modal) {
     modal.style.display = "none";
  }
};

//获取打开模式对话框的按钮
let trigger=document.getElementsByClassName（“js模态”）[0]；
trigger.onclick=函数（）{
modal.style.display=“块”；
};
//获取与触发器元素链接的模态
让modal=document.getElementById(
trigger.href.substring（trigger.href.indexOf（“#”）+1）
);
//当用户单击该按钮时，打开模式对话框
让allClose=modal.getElementsByClassName（“js-modal-close”）；
//所有链接到模态的元素都可以关闭模态
for（设i=0；i

---

这是一个例子。我曾经尝试过使用

var

而不是

let

，但对于如何通过编程将它们限定到特定的html结构，我还没有100%的把握。

这里有一个解决方案，虽然脏但有效

---

这里有一个解决方案，肮脏但有效

您只绑定到js中的第一个按钮。你的第二个目标没有任何约束

---

您只绑定到js中的第一个按钮。没有任何内容绑定到第二次更改javascript:

    // Get the button that opens the modal
let trigger = document.getElementsByClassName("js-modal")[0];

let trigger1 = document.getElementsByClassName("js-modal")[1];

trigger.onclick = function() {
  modal.style.display = "block";
};

trigger1.onclick = function() {
  modal.style.display = "block";
};

// Get the modal linked with with trigger element
let modal = document.getElementById(
  trigger.href.substring(trigger.href.indexOf("#") + 1)
);

// When the user clicks the button, open the modal
let allClose = modal.getElementsByClassName("js-modal-close");


// All elments linked to the modal can close the modal
for (let i = 0; i < allClose.length; i++) {
  allClose[i].onclick = function() {
    modal.style.display = "none";
  };
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(e) {
  if (e.target == modal) {
     modal.style.display = "none";
  }
};

//获取打开模式对话框的按钮
let trigger=document.getElementsByClassName（“js模态”）[0]；
让trigger1=document.getElementsByClassName（“js-modal”）[1]；
trigger.onclick=函数（）{
modal.style.display=“块”；
};
trigger1.onclick=函数（）{
modal.style.display=“块”；
};
//获取与触发器元素链接的模态
让modal=document.getElementById(
trigger.href.substring（trigger.href.indexOf（“#”）+1）
);
//当用户单击该按钮时，打开模式对话框
让allClose=modal.getElementsByClassName（“js-modal-close”）；
//所有链接到模态的元素都可以关闭模态
for（设i=0；i

更改您的javascript：

    // Get the button that opens the modal
let trigger = document.getElementsByClassName("js-modal")[0];

let trigger1 = document.getElementsByClassName("js-modal")[1];

trigger.onclick = function() {
  modal.style.display = "block";
};

trigger1.onclick = function() {
  modal.style.display = "block";
};

// Get the modal linked with with trigger element
let modal = document.getElementById(
  trigger.href.substring(trigger.href.indexOf("#") + 1)
);

// When the user clicks the button, open the modal
let allClose = modal.getElementsByClassName("js-modal-close");


// All elments linked to the modal can close the modal
for (let i = 0; i < allClose.length; i++) {
  allClose[i].onclick = function() {
    modal.style.display = "none";
  };
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(e) {
  if (e.target == modal) {
     modal.style.display = "none";
  }
};

//获取打开模式对话框的按钮
let trigger=document.getElementsByClassName（“js模态”）[0]；
让trigger1=document.getElementsByClassName（“js-modal”）[1]；
trigger.onclick=函数（）{
modal.style.display=“块”；
};
trigger1.onclick=函数（）{
modal.style.display=“块”；
};
//获取与触发器元素链接的模态
让modal=document.getElementById(
trigger.href.substring（trigger.href.indexOf（“#”）+1）
);
//当用户单击该按钮时，打开模式对话框
让allClose=modal.getElementsByClassName（“js-modal-close”）；
//所有链接到模态的元素都可以关闭模态
for（设i=0；i

您需要为每个模式使用唯一的ID：

<div id="modal-1" class="m-modal">...</div>
<div id="modal-2" class="m-modal">...</div>

---

jsiddle演示：

您需要为每个模式使用唯一的ID：

<div id="modal-1" class="m-modal">...</div>
<div id="modal-2" class="m-modal">...</div>

---

jsiddle Demo:

变量

modal

仅引用其中一个modal，并且您的单击处理程序都设置为在该一个modal上操作。我是否应该将我的

let trigger

包装在for循环中？或者整个事情需要循环？我认为这对你的点击处理程序没有帮助。但是window.onclick one，您可以通过将e.target的类与“js-modal”进行比较使其成为泛型变量

modal

只引用其中一个modal，并且您的单击处理程序都设置为在该模式上操作。我是否应该将我的

let trigger

包装在for循环中？或者整个事情需要循环？我认为这对你的点击处理程序没有帮助。然而，在window.onclick one中，您可以将e.target类与“js-modal”进行比较，从而使其成为通用的。这很尴尬。。我根据一个模板动态创建了我的div，我猜它们都有modal-1id.smh。（3分钟后接受回答）那太尴尬了。。我根据一个模板动态创建了我的div，我猜它们都有modal-1id.smh。（将在3分钟内接受回答）

let triggers = [].slice.call(document.getElementsByClassName('js-modal'))

triggers.forEach(function(trigger) {
 // ...
}