javascript - 多个弹出窗口但只有一个有效...为什么？

Question

我正在努力处理这段代码，我认为它缺乏对 js 的理解。当我尝试复制代码以制作多个按钮时，只有最后一个按钮可以正常工作(数值最高的按钮)。我尝试这种方式是因为所有的行为都是在 ID 标签中完成的，所以它们是唯一的，我知道这是一个工作......但我仍在学习这一点。我不确定是什么造成了我的麻烦，但我希望你能提供帮助。感谢您提前抽出时间

HTML

<button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
  Popup contents here
 <button id="CloseBtn">ClosePopup</button>
</div>
<div>
some other content that will be behind the popup
</div>

<button id="LearnMoreBtn2">Learn More2</button>
<div id="overlay2"></div>
<div id="popup2">
 Popup contents here2
 <button id="CloseBtn2">ClosePopup2</button>
</div>
<div>
 some other content that will be behind the popup2
</div>

CSS

#overlay {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 99999;
}

#popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
margin-top: -75px;
margin-left: -150px;
background: #FFFFFF;
border: 2px solid #000;
z-index: 100000;
}

#overlay2 {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 99999;
}

#popup2 {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
margin-top: -75px;
margin-left: -150px;
background: #FFFFFF;
border: 2px solid #000;
z-index: 100000;
}

JS

window.onload = function() {
document.getElementById("LearnMoreBtn").onclick = function(){
    var overlay = document.getElementById("overlay");
    var popup = document.getElementById("popup");
    overlay.style.display = "block";
    popup.style.display = "block";
 };

document.getElementById("CloseBtn").onclick = function(){
    var overlay = document.getElementById("overlay");
    var popup = document.getElementById("popup");
    overlay.style.display = "none";
    popup.style.display = "none";      
    }
    };

window.onload = function() {
document.getElementById("LearnMoreBtn2").onclick = function(){
    var overlay = document.getElementById("overlay2");
    var popup = document.getElementById("popup2");
    overlay.style.display = "block";
    popup.style.display = "block";
    };

document.getElementById("CloseBtn2").onclick = function(){
    var overlay = document.getElementById("overlay2");
    var popup = document.getElementById("popup2");
    overlay.style.display = "none";
    popup.style.display = "none";      
    }
    };

Answer 1

您使用了两次window.onload = function() {}。合并这 2 个 window.onload 并仅使用一次。

您的最终代码应如下所示

window.onload = function() {
document.getElementById("LearnMoreBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};

document.getElementById("CloseBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";      
}

document.getElementById("LearnMoreBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "block";
popup.style.display = "block";
};

document.getElementById("CloseBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "none";
popup.style.display = "none";      
}
};