Javascript 点击时出现错误的模式弹出窗口（html、css、js）

我很难弄清楚如何让每个示例都有一个包含自己内容的模式。目前，如果单击EXAMPLE2，EXAMPLE1中的内容仍然会弹出。我也不知道为什么图标或情态动词在这里不起作用，但我希望有人至少能根据这里的代码给出一些指针。我尝试将ID更改为唯一的，但我认为我做得不对？先谢谢你

功能切换弹出窗口{ document.getElementByIdpopup-1.classList.toggleactive； } 功能切换弹出窗口{ document.getElementByIdpopup-2.classList.toggleactive； } .图标内部{ 宽度：120px； /*高度：40vh*/ 浮动：左； 右边填充：20px； 文本对齐：居中； /*位置：相对位置*/ 边界半径：50%； 位置：相对位置； 显示：内联块； } /*.图标内跨{ 浮动：左； 左侧填充：20px； 文本对齐：居中； 位置：相对位置； 边界半径：50%； 显示：内联块； }*/ .图标内部跨度：之前{ 左边距：0； 字体大小：40px； } .图标内部跨度：悬停{ 左边距：0； 字体大小：40px； 颜色：4FC1E9； 光标：指针； } .图标内部信息范围：之前{ 高度：15px； 宽度：20px； 左边距：0； 左侧填充：2px； 右侧填充：5px； 字体大小：12px； /*浮动：flex*/ 位置：相对位置； } .图标内部信息范围：悬停{ 左边距：0； 光标：帮助； 位置：相对位置； 右侧填充：5px； } .icon内部信息.tooltiptext{ 可见性：隐藏； 宽度：400px； 背景色：黑色； 颜色：fff； 文本对齐：居中； 边界半径：6px； 填充：5px0； 位置：绝对位置； z指数：1； 顶部：-5px； 左：110%； } .icon内部信息.tooltiptext:：after{ 内容：； 位置：绝对位置； 最高：50%； 右：100%； 页边顶部：-5px； 边框宽度：5px； 边框样式：实心； 边框颜色：透明黑色透明； } .icon内部信息：hover.tooltiptext{ 能见度：可见； } .popup.overlay{ 位置：固定； 顶部：0px； 左：0px； 宽度：100vw； 高度：100vh； 背景：rgba0,0,0,0.7； z指数：1； 显示：无； } .popup.content pop{ 位置：绝对位置； 最高：50%； 左：50%； 变换：平移-50%，缩放-50%； 背景：fff； 宽度：500px； 高度：250px； z指数：2； 文本对齐：居中； 填充：20px； 框大小：边框框； 字体系列：开放式Sans，无衬线； } .弹出。关闭btn{ 光标：指针； 位置：绝对位置； 右：20px； 顶部：20px； 宽度：30px； 高度：30px； 背景：222人； 颜色：fff； 字体大小：25px； 字号：600； 线高：30px； 文本对齐：居中； 边界半径：50%； } .popup.active.overlay{ 显示：块； } .popup.active.content-pop{ 过渡：所有300毫秒的缓进缓出； 转换：转换50%，-50%缩放1； } @媒体最大宽度：750px{ .popup.active.content pop{ 转换：转换-10%，-50%比例1； } } -> 标题1

采访、记笔记、讲故事

-> &时代； 标题1 例1

标题2

采访、记笔记、讲故事

-> &时代； 标题2 例2

---

最初您的问题是重复的ID。然而，在更改它们之后，问题变成了两个不同函数的名称相同

最简单的解决方案是将要打开的ID传递给函数：

出于测试目的，我删除了所有CSS，因为弹出窗口没有正确对齐

在我的示例中，单词OPEN是您的OPEN图标。它的工作原理是一样的，只是没有图标

函数togglePopupid{ document.getElementByIdid.classList.toggleactive； } .popup{显示：无；} .active{显示：块；} 打开 标题1

采访、记笔记、讲故事

-> &时代； 标题1 例1

打开 标题2

采访、记笔记、讲故事

-> &时代； 标题2 例2

---

不能有两个元素具有相同的ID我应该在span和close btn div中使用“popup-1”和“popup-2”吗？这对我不起作用。手感

---

编辑代码above@J.Doe我用一个工作示例更新了我的答案，该示例去掉了一些HTML/CSS以简化我的答案。但将其添加到所有togglePopup.mazing调用中是可行的。我不知道你的意思是在js中使用“id”。我用的是“popup-1”和“popup-2”。我对这个很陌生，所以感谢你的帮助！再次感谢你