显示弹出式窗口，其中包含特定于所单击容器的内容

如何解决显示弹出式窗口，其中包含特定于所单击容器的内容

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

HTML：

<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>

JS：

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

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

谢谢！

解决方法

这是一个有效的代码段：

const boxes= document.querySelectorAll('.box')
const popups= Array.from(document.querySelectorAll('.popup'))

boxes.forEach((box,index)=>{
box.addEventListener('click',(e)=>{
popupFunction(index)
})
})

function popupFunction(index) {
  popups[index].classList.toggle("show");
}

.popup{
  display:none
}
.show{
  display:block
}

<div class="box">
  box1

</div>
<div class="box">
  box2

</div>
<div class="box">
  box3

</div>

<div class="popup" >
   <img src=""> 
  <span class="popupText">popup from box 1 </span> 
</div> 

<div class="popup" > 
   <img src="">
   <span class="popupText"> popup from box 2 </span> </div> 

<div class="popup" >
  <img src=""> 
  <span class="popupText"> popup from box 3 </span> 
</div> 

,

您可以创建一个将用作弹出窗口的div，然后从单击的源div中填充其内容。

我逐步构建了该功能，因此您可以轻松地遵循逻辑。

通过将css display属性从display:none更改为display:flex来显示模式。通过删除包含display:flex的类，然后将其变回display:none来隐藏它。

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

const $ = document.querySelector.bind(document);
const mdl = $('#modal');

function popupFunction(e) {
  const targ = e.target;
  const prnt = targ.closest('div.popup');
  const chldn = prnt.childNodes;
  const txt = [...chldn].filter((d) => d.className === 'popupText');
  const msg = txt[0].innerText;
  $('#modal .body').innerText = msg;
  $('#modal').classList.add('modalHasContent');
}
function closeModal(e){
  e.target.classList.remove('modalHasContent');
}

#modal{
  z-index: 1;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#modal .body{
  width: 400px;
  background: wheat;
  border: 1px solid orange;
  padding: 15px 25px;
}
.modalHasContent{
  display: flex !important;
  justify-content: center;
  align-items: center;
  background: rgba(0,0.7);
}
.popupText{
  display: none;
}

<div class="novels__gallery popup" onclick="popupFunction(event)">
  <img class="novels__gallery-img" src="https://placekitten.com/250/100">
  <div class="novels__gallery-title">Fantasia</div>
  <span class="popupText">Coming Soon!</span>
</div>
<div class="novels__gallery popup" onclick="popupFunction(event)">
  <img class="novels__gallery-img" src="https://placekitten.com/240/90">
  <div class="novels__gallery-title">Despicable Me</div>
  <span class="popupText">That's what I'm talking about!</span>
</div>

<div id="modal" onclick="closeModal(event)">
  <div class="body"></div>
</div>

,

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