Javascript 创建多个弹出按钮

因此，我目前在创建带有多个按钮的多个弹出窗口时遇到了一个问题。我有多个按钮，但当我点击它们时，它们都显示相同的弹出窗口。如何为每个按钮指定不同的弹出窗口？我觉得我什么都试过了，但我似乎都想不出来。任何帮助都将不胜感激

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{
位置：固定；
顶部：0px；
左：0px；
宽度：100vw；
高度：100vh；
背景：rgba（0,0,0,0.7）；
z指数：1；
显示：无；
}
.popup.content{
位置：绝对位置；
最高：50%；
左：50%；
转换：转换（-50%，-50%）比例（0）；
背景：#fff；
宽度：350px；
高度：220px；
z指数：2；
文本对齐：居中；
填充：20px；
框大小：边框框；
}
.弹出。关闭btn{
光标：指针；
位置：绝对位置；
右：20px；
顶部：20px；
宽度：30px；
高度：30px；
背景：#222；
颜色：#fff；
字体大小：25px；
字号：600；
线宽：30px；
文本对齐：居中；
边界半径：50%；
}
.popup.active.overlay{
显示：块；
}
.popup.active.content{
过渡：所有300毫秒的缓进缓出；
转换：转换（-50%，-50%）比例（1）；
}

&时代；
趣事一
葡萄牙语是9个国家的官方语言。
&时代；
趣事2
&时代；
趣事3
&时代；
趣事4
&时代；
趣事5
&时代；
趣事6
&时代；
趣事7
&时代；
趣事8
&时代；
趣事9
联合国
多伊斯
特雷斯



四重奏
钦科
赛斯



赛特
大东
诺夫

您可以将弹出数字作为参数传递给

切换弹出

作为：

• 有关模板字符串的详细信息

功能切换弹出窗口（num）{
document.getElementById（`popup-${num}`）.classList.toggle（“active”）；
}

.popup.overlay{
位置：固定；
顶部：0px；
左：0px；
宽度：100vw；
高度：100vh；
背景：rgba（0,0,0,0.7）；
z指数：1；
显示：无；
}
.popup.content{
位置：绝对位置；
最高：50%；
左：50%；
转换：转换（-50%，-50%）比例（0）；
背景：#fff；
宽度：350px；
高度：220px；
z指数：2；
文本对齐：居中；
填充：20px；
框大小：边框框；
}
.弹出。关闭btn{
光标：指针；
位置：绝对位置；
右：20px；
顶部：20px；
宽度：30px；
高度：30px；
背景：#222；
颜色：#fff；
字体大小：25px；
字号：600；
线宽：30px；
文本对齐：居中；
边界半径：50%；
}
.popup.active.overlay{
显示：块；
}
.popup.active.content{
过渡：所有300毫秒的缓进缓出；
转换：转换（-50%，-50%）比例（1）；
}

&时代；
趣事一
葡萄牙语是9个国家的官方语言。
&时代；
趣事2
&时代；
趣事3
&时代；
趣事4
&时代；
趣事5
&时代；
趣事6
&时代；
趣事7
&时代；
趣事8
&时代；
趣事9
联合国
多伊斯
特雷斯



四重奏
钦科
赛斯



赛特
大东
诺夫

一个非常简短有效的解决方案-

按类名获取所有弹出窗口、打开按钮和关闭按钮，循环浏览它们，将eventlisteners附加到每个按钮，然后就完成了

它减少了什么-

无需为每个打开和关闭按钮单击

onclick

无需为每个弹出窗口、关闭按钮和打开按钮设置特殊id

这大大减少了html的大小

还有一个优势——在将来，如果你想添加更多的弹出窗口，不需要触摸JS，现有的代码将处理它

功能切换弹出窗口（num）{
弹出窗口[num].classList.toggle（“活动”）；
}
让popups=document.getElementsByClassName（“popup”）；
让closeBtns=document.getElementsByClassName（“closebtn”）；
让openBtns=document.getElementsByClassName（“btn”）；
for（设i=0；iHint:popup（）函数如何知道要打开哪些弹出窗口，以及如果同时打开所有弹出窗口会发生什么情况？