logo标签列表

点击容器后显示与内容相关的弹出窗口

javascriptgetelementbyidgetelementsbyclassname
3

我有6个div，当我点击其中一个div时，需要在该div中出现弹出窗口；如果我点击另一个div，则需要在该div中出现弹出窗口。我知道如何在一个div中使用getElementById实现这一点，但我不知道如何在不同的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是可以的，但我不知道如何正确应用它。
谢谢！
1
使用 querySelector。 - user14520680
这个回答解决了你的问题吗？Javascript：如何通过类名获取一个元素？ - yqlim
@expressjs123，querySelector在这种情况下无法帮助，因为它只选择第一个匹配的元素。 - yqlim
@yqlim 但是在这里，类名都是唯一的 - 所以不需要匹配任何奇怪的元素。 - user14520680
检查我的答案，伙计们。 - سعيد
显示剩余3条评论
4个回答
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>

我已经尝试过了，但不起作用。我留下一个简单的例子。我们有3个盒子，当点击时，会出现一个带有一些文本的小弹出窗口以显示所点击的盒子。<body> <div class="container"> <div class="popup" onclick="popupFunction()"> <img src=""> <span class="popupText"> 即将推出 </span> </div> <div class="popup" onclick="popupFunction()"> <img src=""> <span class="popupText"> 即将推出 </span> </div> <div class="popup" onclick="popupFunction()"> <img src=""> <span class="popupText"> 即将推出 </span> </div> </div> </body> - alexbaes
这是一个可工作的示例 https://codepen.io/SAIDESIGNER/pen/JjKwrpW - سعيد
@cssyphus，我真的没有理解“回答两个问题的部分”，据我所知，这是该问题的一个可行解决方案，对吧？ - سعيد
1
是的，你的解决方案可行。已点赞。我的评论是给Alex的。当一个答案确实回答了最初提出的问题，但是提问者（“OP”）随后请求对答案进行相当大的更改以微调时，这并不公平。尽管第一个答案对最初的问题是正确的，但OP实际上是在要求第二个答案。在这些情况下，我们要求OP接受最佳答案，并立即提出新问题。这只需要额外一两分钟的时间。但是回答第一个问题的人将因其答案而获得奖励，同时 - cssyphus
1
第二个问题将被许多新人看到，他们都会尝试提供帮助。但是，如果OP 微调 问题，那么只有回答原始问题的人会看到他们的更改请求并尝试协助。这对于回答第一个问题的人来说并不公平，而且第二个问题的答案可能需要更长时间才能得到解答。因此，对于OP和回答者来说，提出第二个问题要好得多。 - cssyphus
显示剩余9条评论
1
你可以创建一个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,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>

0

我有一个解决方案，但它不是我需要的。我问错了问题，请原谅。

1
提供了新的答案 - 但请查看Saidu回答下面的评论。这些不是对任何人行动的批评，而是关于如何优化所有参与者体验的建议。 - cssyphus
0

我的最爱：我的 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接