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

Does this answer your question? [Javascript: How to get only one element by class name?](https://stackoverflow.com/questions/21436550/javascript-how-to-get-only-one-element-by-class-name) — yqlim, Nov 12 '20 at 11:14
@expressjs123 `querySelector` won't help this case because it only selects the first matched element. — yqlim, Nov 12 '20 at 11:15
@yqlim But here, the class names are all unique - so no need for matching any weir delements — , Nov 12 '20 at 11:16
@expressjs123 I believe the OP is only showing only 1 chunk of the page — yqlim, Nov 12 '20 at 11:17
If I use a querySelector, when I click on the second div, the popup appears on the first div, and if I click another div, the popup appears on the first div too — alexbaes, Nov 12 '20 at 11:23

سعيد · Answer 1 · 2020-11-12T14:21:11.793

1

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>

edited Nov 12 '20 at 14:21

answered Nov 12 '20 at 11:43

سعيد

1,547
1
14
32

I've tryed and don't works. I leave a simple example. We have 3 boxes, and onclick, appear a little popup with some text to clicked box.

Coming Soon

Coming Soon

Coming Soon

– alexbaes Nov 12 '20 at 13:55
here is a working example https://codepen.io/SAIDESIGNER/pen/JjKwrpW – سعيد Nov 12 '20 at 13:59
Press Ctrl + M to make a working example inside your answer (called a Stack Snippet) – cssyphus Nov 12 '20 at 14:05
@cssyphus thank you I just find codepen quicker , ll create a snippet now here – سعيد Nov 12 '20 at 14:07
@cssyphus check my snippet – سعيد Nov 12 '20 at 14:10
This is a codepen with similar code. I need some javascript to do the same that your codepen. https://codepen.io/baes13/pen/mdEaqJa – alexbaes Nov 12 '20 at 14:29
@SaiduSenpay Yes, that looks great. We don't mind members using fiddles/codepens, but for simple solutions it is helpful to see the code nicely segmented and runnable inside your answer. – cssyphus Nov 12 '20 at 14:31
@alexbaes You are expanding the original question and basically requesting two answers for the price of one. Please choose a correct answer for this question and then open another question to expand on this one, and post a comment below this answer with a URL link to the new question so that Saidu can easily find it. – cssyphus Nov 12 '20 at 14:33
Sorry, is my first question on Stackoverflow and I don't know much about Javascript yet. If you prefer I delete this post, and I open a new question with mycodepen example directly. I only need to show a message for every image that someone click. – alexbaes Nov 12 '20 at 14:50
@alexbaes its okkay we all start somewhere , so if it worked please mark this a correct answer – سعيد Nov 12 '20 at 14:51
@cssyphus I really didn't get the "answering two questions part " as far as I know this is a working solution for the question right ? – سعيد Nov 12 '20 at 14:53
1

Yes, yours was a working solution. Upvoted. My comment was for Alex. When an answer DOES answer the question as originally written, but the questioner (the "OP") then requests a pretty big change to *fine-tune* the answer, that isn't really fair. The OP is really asking for a second answer even though the first answer was correct for what was originally asked. In these cases, we ask the OP to accept the best answer and ask a new question right away. It should only take an extra minute or two. But then the person who answered the first question is rewarded for their answer, AND – cssyphus Nov 12 '20 at 16:23
1

the second question will be viewed by dozens of new people who will all try to help. But if the OP *fine-tunes* the question, then only the person who answered the original question will see their change request and try to assist. This isn't really fair to the person who answered the first question, and it could take A LOT longer for the second question to be answered. So asking a second question is much better for both the OP *and* the answerer. – cssyphus Nov 12 '20 at 16:24
@cssyphus ah yeah I get it I was confused hhh . sure asking new question is better fo the questioner and for the community too – سعيد Nov 12 '20 at 16:26

cssyphus · Accepted Answer · 2020-11-12T17:02:00.033

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>

score 0 · Answer 3 · answered Nov 12 '20 at 15:00

0

I have a solution but it is not what I need. I have the wrong question, excuse me.

answered Nov 12 '20 at 15:00

alexbaes

35
5

1

New answer provided - but please see comments below Saidu's answer. These are not criticisms of anyone's actions, but rather suggestions on how to optimize the experience for all parties. – cssyphus Nov 12 '20 at 16:29

Intacto · Answer 4 · 2023-02-10T18:58:17.787

My favorite: My jsfiddle

function popupAct(t) {
    m=document.getElementById("modal");
    m.firstElementChild.innerHTML=t.firstElementChild.innerHTML;
  m.classList.add('modalHasContent');
}

#modal{
  z-index: 9999;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
}
#modal .body:before{
  float:right;
  display: block;
  content: "\00d7";
  padding:10px;
}
#modal .body{
  width: 80%;
  border: 1px solid gray;
  padding: 10%;
  background-color: white;
  overflow-y: scroll;
  height: calc(100% - 30%);
}
.modalHasContent{
  display: flex !important;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.7);
}
.popupText{display: none;}

<div id="modal" onclick="this.classList.remove('modalHasContent')"><div class="body"></div></div>

<div align="justify"><span>Dr. Brrerere Krrerererer, MD, MPH<br>
<br>
Dr. werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y University (MPH).</span>

<div onclick="popupAct(this);" style="float: right; cursor: pointer; padding: 10px; text-align: justify;">Read more 

<span class="popupText"><b>Dr. B sdf sdf sdf werwerwerwererwerw <br><br> Eer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y D, MPH</b>
<br><br>
werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y.
<br><br>
werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y.
<br><br>
werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y<br><br><br><br><br>wwwwwwwwwwwwwwwwwwwwwwww 
 werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y werwerwerwererwerw wer wer wer wer wer wer tr tyj tyj tyj tyj hrth rth rth rth rt ty juyk yuk yuk yyj tyj tyj tyj tyj tyj tyj tyj tyj tyjtyj tyjtyj tyj tyj tyjtyjty jtyj tyj tyj tyj tyj y 
 </span>
 </div>

Display popups with content specific to the clicked container

4 Answers4

Linked