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

Question

我有 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 有效，但我不知道如何正确应用它。

谢谢！！

Answer 1

这是一个工作片段：

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>

Answer 2

我有一个解决方案，但这不是我需要的。我问错了，不好意思。

Answer 3

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

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

通过将css显示属性从display:none更改为display:flex来显示模态。通过删除包含 display:flex 的 class 将其隐藏，将其变回 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,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>

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

Display popups with content specific to the clicked container

javascript

getelementbyid

getelementsbyclassname