Javascript 试图创建两个不同的模态，但这两个按钮显示相同的模态。有人能帮我吗？

我这里有一个小提琴与代码，我正试图写。正如标题所示，我想要（甚至最终是3个）当点击按钮时淡入的模态。现在，两个按钮显示相同的原始模式。我相信这是一个简单的答案，但是有人能告诉我哪里错了吗

这是小提琴

Html

Javascript

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

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

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

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

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

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

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

// When the user clicks on <span> (x), close the modal
span2.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";
    }
}

//获取模式
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
//获取模态
var modal2=document.getElementById（'myModal2'）；
//获取打开模式对话框的按钮
var btn2=document.getElementById（“myBtn2”）；
//获取关闭模态的元素
var span2=document.getElementsByClassName（“close2”）[0]；
//当用户单击该按钮时，打开模式对话框
btn2.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span2.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

代码后半部分中的事件处理程序都引用了

modal

，而不是

modal2

。用以下方法修复：

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

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

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

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

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

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

// 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 == modal2) {
        modal2.style.display = "none";
    }
}

//获取模式
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
//获取模态
var modal2=document.getElementById（'myModal2'）；
//获取打开模式对话框的按钮
var btn2=document.getElementById（“myBtn2”）；
//获取关闭模态的元素
var span2=document.getElementsByClassName（“close2”）[0]；
//当用户单击该按钮时，打开模式对话框
btn2.onclick=函数（）{
modal2.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span2.onclick=函数（）{
modal2.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==modal2）{
modal2.style.display=“无”；
}
}

以下是代码中的错误：

在HTML中，模式1的

div

未正确关闭，因此模式2在模式1中被“保留”

在JS中，modal1的第一组单击事件被modal2的第二组事件侦听器代码覆盖。另外，附加到

窗口的两个事件侦听器需要合并到一个处理程序中。否则，第二个将覆盖第一个，因为
onclick
只有一个处理程序。使用
addEventListener
将多个事件处理程序绑定到特定DOM元素上的特定事件。下面是EventListener接口的示例

这是固定的。

检查下一个：

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

---

有了btn2，你应该显示modal2而不是modal

真不敢相信我错过了。然而，一旦纠正了这个错误，似乎还有另一个错误。现在第二个按钮不起作用，第一个按钮打开两个模态，一个在另一个之上。非常感谢。这么简单的错误，真不敢相信我错过了。非常感谢。当我有你的时候，你知道改变关闭函数的语法吗？这样你就可以点击窗口中的任何地方来关闭模式？现在，当在模式外部单击时，其设置为关闭，但我想将其设置为模式内部和外部。有一种方法可以做到这一点：。请注意添加到按钮事件处理程序的

stopPropagation

。这可以防止单击事件（按钮上）冒泡到

窗口

，并触发该窗口上设置的事件处理程序（隐藏模式）。希望能奏效。

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

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

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

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

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

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

// 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 == modal2) {
        modal2.style.display = "none";
    }
}

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