多个弹出窗口，但只有一个有效..为什么?

Multiple Pop Ups But Only One Works... Why?

本文关键字：有一个 有效 为什么 窗口      更新时间：2023-09-26

我很难理解这段代码，我认为这是对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";      
    }
    };

您正在使用window.onload = function() {}两次。合并这两个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";      
}
};

尝试合并这两个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";      
}
};

删除window.onload = function() {的第二次出现。

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

相关文章：