0
私はこのコードに苦労しています。私はそのコードの理解が不十分だと思います。複数のボタンを作るためにコードを複製しようとすると、最後のものだけが正しく動作します（数値が最も高いもの）。私はこの方法を試みました。なぜなら、すべての行動がIDタグで行われているからです。私は知っている周りの仕事の中で、ユニークなものになるはずです...しかし、私はまだこれを学んでいます。私は何が私の悩みを引き起こしているのか分からないが、私はあなたが助けることを望んでいる。これらの2 window.onloadをマージ試してみて、一度だけ、それを使用して、事前複数のポップアップが、しかし、1つだけ動作します...なぜですか？
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";
}
};