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() {}两次。合并这两个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";      
}
};

Answer 2

尝试合并那些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";      
}
};

Answer 3

删除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>

多个Pop Ups但只有一个有效...为什么？

3 个答案: