Javascript 显示列表中的不同弹出窗口。

我在显示页面上有多个项目的弹出窗口时遇到问题。从本质上说，它是一个垂直的“列表”项目向下的页面。到目前为止，我有两个。单击第一个项目时，第一组信息正确显示，但单击第二个项目时，它会在弹出窗口中显示第一组信息。感谢您的帮助，谢谢

    <p> <a class="show-popup" href="#">Manual Therapy</a></p>
    <div class="overlay-bg">
     <div class="overlay-content">
      <h2>Manual Therapy</h2>
      <p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
      <button class="close-btn">Close</button>
     </div>
    </div>
    <a class="show-popup" href="#">LIST ITEM 2</a>
     <div class="overlay-bg">
      <div class="overlay-content">
       <h2>Low Level LASER Therapy</h2>
       <p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
       <button class="close-btn">Close</button>
     </div>
   </div>

这是JS

$(document).ready(function(){
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
$('.overlay-bg').show(); //display your popup
});

// hide popup when user clicks on close button
$('.close-btn').click(function(){
$('.overlay-bg').hide(); // hide the overlay
});

// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function(){
    $('.overlay-bg').hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
    return false;
});

});

---

您需要将第二个锚点包装在

标记中，然后您可以更改：

$('.overlay-bg').show();

致：

这将帮助您根据您单击的

.show popup

定位

.overlay bg

---

添加一个id以链接、div和按钮显示您想要显示的内容

<a class="show-popup" href="#" id="1">Manual Therapy</a></p>
    <div class="overlay-bg" id="div_1">
     <div class="overlay-content">
      <h2>Manual Therapy</h2>
      <p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
      <button class="close-btn">Close</button>
     </div>
    </div>
    <a class="show-popup" href="#" id="2">LIST ITEM 2</a>
     <div class="overlay-bg" id="div_2">
      <div class="overlay-content">
       <h2>Low Level LASER Therapy</h2>
       <p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
       <button class="close-btn">Close</button>
     </div>
   </div>

手法治疗
这里显示的第一组信息

接近
低强度激光治疗
第二组信息显示在这里

接近

并使用$（this）和id

<script>
$(document).ready(function(){
// show popup when you click on the link
$('.show-popup').click(function(event){
    var id = $(this).attr("id");
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
$('#div_'+id).show(); //display your popup
});

// hide popup when user clicks on close button
$('.close-btn').click(function(){
    var id = $(this).attr("id");
$('#div_'+id).hide(); // hide the overlay
});

// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function(){
    $(this).hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
    return false;
});

});
</script>

$（文档）.ready（函数（）{
//单击链接时显示弹出窗口
$（'.show popup'）。单击（函数（事件）{
var id=$（this.attr（“id”）；
event.preventDefault（）；//禁用普通链接函数，使其不会刷新页面
$（'#div'+id）.show（）；//显示弹出窗口
});
//当用户单击关闭按钮时隐藏弹出窗口
$（'.close btn'）。单击（函数（）{
var id=$（this.attr（“id”）；
$（'#div'+id）.hide（）；//隐藏覆盖
});
//如果用户单击容器外的任何位置，则隐藏弹出窗口
$（'.overlay bg'）。单击（函数（）{
$（this.hide（）；
})
//如果用户在弹出覆盖中单击，则阻止覆盖关闭
$（'.overlay content'）。单击（函数（）{
返回false；
});
});

将您想要查看的所需弹出内容的ID放入锚

href

中：

CSS:

.overlay-content {
  display:none; /* NOTE THIS */

$(function(){

  $('.show-popup').click(function(event){
    event.preventDefault();
    $('.overlay-bg,'+ $(this).attr('href')).show(); // Show overlay, but also
  });                                               // the popup ID content
                                                    // taken from the anchor HREF
  $('.overlay-bg, .close-btn').click(function(){
      $('.overlay-bg, .overlay-content').hide();
  });

  $('.overlay-content').click(function(event){
      event.stopPropagation();
  });

});

HTML:（只使用一个弹出元素，但使用更多内容元素！）

这样做，您甚至可以在弹出窗口中只有一个

CLOSE

按钮，但我将把它留给您，
我希望你能大致了解

---

另外：看一看这个问题：

首先一个标签用p标签包装，而不是第二个标签。把它包起来！非常感谢。当我格式化代码在这里显示时，锚被删除了，但是脚本更改工作得很好。你能解释一下它到底为什么起作用吗？我对JS不是很流利。这是因为当你使用

$（'.overlay bg'）.show（）时。它将隐藏DOM中的所有
.overlay bg
，而不仅仅是由其上一个按钮触发的覆盖。因此，当您使用
$（this.parent（）.next（）.show（）
，它将帮助您仅针对作为单击按钮的下一个元素的覆盖
.overlay-content {
  display:none; /* NOTE THIS */

<a class="show-popup" href="#cont1">Manual Therapy</a>
<a class="show-popup" href="#cont2">LIST ITEM 2</a>


<div class="overlay-bg">
  <div id="cont1" class="overlay-content">
      <h2>Manual Therapy</h2>
      <p>FIRST SET OF INFORMATION DISPLAYED HERE</p>
      <button class="close-btn">Close</button>
  </div>
  <div id="cont2" class="overlay-content">
       <h2>Low Level LASER Therapy</h2>
       <p>SECOND SET OF INFORMATION DISPLAYED HERE</p>
       <button class="close-btn">Close</button>
  </div>
</div>

$(function(){

  $('.show-popup').click(function(event){
    event.preventDefault();
    $('.overlay-bg,'+ $(this).attr('href')).show(); // Show overlay, but also
  });                                               // the popup ID content
                                                    // taken from the anchor HREF
  $('.overlay-bg, .close-btn').click(function(){
      $('.overlay-bg, .overlay-content').hide();
  });

  $('.overlay-content').click(function(event){
      event.stopPropagation();
  });

});