Javascript 显示包含特定于所单击容器的内容的弹出窗口

我有6个div，当我在一个div中单击时，我需要它，在这个div中显示一个弹出窗口，如果我单击另一个div，在这个其他div中显示一个弹出窗口。我知道如何在一个div中使用getElementById执行此操作，但我不知道如何在其他div中执行此操作。这是我的代码：

HTML:

这适用于一个div，但不适用于另一个div。我认为getElementsByClassName可以工作，但我不知道如何正确应用它

---

谢谢

以下是一个工作片段：

const-box=document.querySelectorAll（“.box”）
const popups=Array.from（document.querySelectorAll（'.popup'））
框。forEach（（框，索引）=>{
box.addEventListener（'单击'，（e）=>{
popupFunction（索引）
})
})
函数popupFunction（索引）{
弹出窗口[index].classList.toggle（“显示”）；
}

.popup{
显示：无
}
.表演{
显示：块
}

框1
框2
框3
从框1弹出
从框2中弹出
从框3弹出

我有一个解决方案，但它不是我需要的。对不起，我的问题有误。

您可以创建一个将作为弹出窗口运行的div，并从单击的源div填充其内容

我一步一步地构建了这个函数，因此您可以轻松地遵循逻辑

通过将css显示属性从

display:none

更改为

display:flex

，可以显示模式。通过删除包含

display:flex

的类，将其返回到

display:none

来隐藏它

注意，代码看起来有点像jQuery，但它是纯js的

const$=document.querySelector.bind（文档）；
常量mdl=$（“#模态”）；
函数popupFunction（e）{
常数目标=e.目标；
const prnt=目标最近（'div.popup'）；
const chldn=prnt.childNodes；
常量txt=[…chldn].filter（（d）=>d.className==='popupText'）；
const msg=txt[0]。innerText；
$（'#modal.body'）。innerText=msg；
$（'#modal'）.classList.add（'modalhascantent'）；
}
函数关闭模式（e）{
e、 target.classList.remove（'modalHasContent'）；
}

#模态{
z指数：1；
显示：无；
位置：固定；
排名：0；
左：0；
宽度：100vw；
高度：100vh；
}
#模态体{
宽度：400px；
背景：小麦；
边框：1px实心橙色；
填充：15px 25px；
}
.modalHasContent{
显示：flex！重要；
证明内容：中心；
对齐项目：居中；
背景：rgba（0,0,0,0.7）；
}
流行语{
显示：无；
}

幻想曲
马上就来！
卑鄙的我
这就是我说的！

使用

查询选择器

。这是否回答了您的问题@expressjs123

querySelector

对这种情况没有帮助，因为它只选择第一个匹配的元素。@yqlim但在这里，类名都是唯一的-因此不需要匹配任何元素delements@expressjs123我相信OP只显示了我尝试过的页面中的一块内容，但不起作用。我留下一个简单的例子。我们有3个框，单击一下，会出现一个小弹出窗口，其中有一些文本要单击框。下面是一个工作示例按Ctrl+M在您的答案中创建一个工作示例（称为堆栈片段）是的，您的是一个工作解决方案。向上投票。我的评论是给亚历克斯的。当一个答案确实像最初写的那样回答了这个问题，但发问者（OP）要求对答案进行相当大的修改，这是不公平的。OP实际上是在要求第二个答案，尽管第一个答案对于最初的问题是正确的。在这些情况下，我们要求OP接受最佳答案，并立即提出新问题。应该只需要多花一两分钟。但是，回答第一个问题的人会因为他们的回答而得到奖励，而第二个问题会被几十个新来的人看到，他们都会尽力帮忙。但是如果OP对问题进行了微调，那么只有回答原始问题的人才能看到他们的更改请求并尝试提供帮助。这对回答第一个问题的人来说并不公平，第二个问题的回答可能需要更长的时间。因此，对于OP和回答者来说，提出第二个问题要好得多。提供了新的答案-但请参见赛杜答案下面的评论。这些不是对任何人行为的批评，而是关于如何优化各方体验的建议。

<div class="novels__gallery popup" onclick="popupFunction()">
  <img class="novels__gallery-img" src="images/fantasia.jpg" alt="Camí fantàstic" title="Camí fantàstic">
  <div class="novels__gallery-title">Fantasia</div>
  <span class="popupText" id="myPopup">Coming Soon!</span>
</div>

function popupFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}