我目前面临一个问题,需要创建多个弹出框和多个按钮。我已经创建了多个按钮,但是当我点击它们时,它们都显示相同的弹出框。如何将不同的弹出框分配给每个按钮?我感觉我已经尝试了所有方法,但仍然无法解决它。非常感谢任何帮助。
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
document.getElementById("popup-2").classList.toggle("active");
document.getElementById("popup-3").classList.toggle("active");
document.getElementById("popup-4").classList.toggle("active");
document.getElementById("popup-5").classList.toggle("active");
document.getElementById("popup-6").classList.toggle("active");
document.getElementById("popup-7").classList.toggle("active");
document.getElementById("popup-8").classList.toggle("active");
document.getElementById("popup-9").classList.toggle("active");
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:350px;
height: 220px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
}
.popup .close-btn{
cursor:pointer;
position:absolute;
right: 20px;
top:20px;
width:30px;
height:30px;
background: #222;
color: #fff;
font-size:25px;
font-weight:600;
line-weight:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay{
display:block;
}
.popup.active .content{
transition:all 300ms ease-in-out;
transform:translate(-50%,-50%) scale(1);
}
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 1</h2>
Portuguese is the official language of 9 countries.
</div>
</div>
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 2</h2>
</div>
</div>
<div class="popup" id="popup-3">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 3</h2>
</div>
</div>
<div class="popup" id="popup-4">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 4</h2>
</div>
</div>
<div class="popup" id="popup-5">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 5</h2>
</div>
</div>
<div class="popup" id="popup-6">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 6</h2>
</div>
</div>
<div class="popup" id="popup-7">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 7</h2>
</div>
</div>
<div class="popup" id="popup-8">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 8</h2>
</div>
</div>
<div class="popup" id="popup-9">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h2> Fun Fact 9</h2>
</div>
</div>
<div class="btn-container">
<button onclick="togglePopup()" class="btn btn1">Un</button>
<button onclick="togglePopup()" class="btn btn2">Dois</button>
<button onclick="togglePopup()" class="btn btn3">Tres</button>
<br><br>
<button onclick="togglePopup()" class="btn btn4">Quatro</button>
<button onclick="togglePopup()" class="btn btn5">Cinco</button>
<button onclick="togglePopup()" class="btn btn6">Seis</button>
<br><br>
<button onclick="togglePopup()" class="btn btn7">Sete</button>
<button onclick="togglePopup()" class="btn btn8">Oito</button>
<button onclick="togglePopup()" class="btn btn9">Nove</button>
<br><br><br><br><br>
</div>