Display popups with content specific to the clicked container

Question

I've 6 div and I need that when I click in one div, appear a popup in this div, and if I click another div appear a popup in this other div. I know how to do that in one div, with getElementById, but I don't know how do that in some different div. This is my code:

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");
}

This works for one div, but don't for another div. I supose that getElementsByClassName works but I don't know how to apply correctly it.

Thanks!!

Answer 1

You can create one div that will operate as the pop-up, and populate its contents from the source div that was clicked.

I built the function step-by-step so you can easily follow the logic.

The modal is displayed by changing the css display property from display:none to display:flex. It is hidden by removing the class that contains the display:flex, turning it back to display:none.

Note that the code looks a bit like jQuery, but it is pure 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>

Answer 2

here is a working snippet :

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>