• 如果不导航，请不要使用<a>锚点。如果需要按钮-请使用<button>。
• 将弹出窗口ID存储到任何按钮data-popup属性中以打开

首先是JavaScript解决方案，然后是jQuery实现以供参考：

// Toggle popup on buttons click:
document.querySelectorAll("[data-popup]").forEach(elBtn => {
  elBtn.addEventListener("click", () => {
    const elPopup = document.querySelector(elBtn.dataset.popup); // Pass the ID from data-popup attribute
    elPopup.classList.toggle("is-active");
  });
});

// Close popup on "backdrop" click:
document.querySelectorAll(".popup").forEach(elPopup => {
  elPopup.addEventListener("click", (evt) => {
    if (evt.target.closest(".popup-content")) return; // Clicked on popup content. Do nothing
    elPopup.classList.toggle("is-active");
  });
});

* {
  margin: 0;
  box-sizing: border-box;
}

.popup {
  display: flex;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #0004;
  padding: 2rem;
  transition: opacity 0.4s;
  opacity: 0;
  pointer-events: none;
}

.popup.is-active {
  opacity: 1;
  pointer-events: auto;
}

.popup-content {
  margin: auto;
  background: white;
  border-radius: 4px;
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.3);
  padding: 1rem;
  max-width: 30rem;
  overflow: auto;
  max-height: 50vh;
}

<button type="button" data-popup="#popup-one">Open popup 1</button>
<button type="button" data-popup="#popup-two">Open popup 2</button>

<div class="popup" id="popup-one">
  <div class="popup-content">
    <button type="button" data-popup="#popup-one">Close</button>
    <h2>Popup one</h2>
    <p>Lorem one ipsum dolor sit amet, consectetur adipisicing elit. Maiores corporis nam earum qui exercitationem sapiente accusantium quas.</p>
  </div>
</div>

<div class="popup" id="popup-two">
  <div class="popup-content">
    <h2>Popup two</h2>
    <button type="button" data-popup="#popup-two">Close</button>
    <p>Lorem two ipsum dolor sit amet, consectetur adipisicing elit. Quisquam voluptate aut magnam quibusdam sit, molestiae, numquam beatae totam.</p>
  </div>
</div>

jQuery实现：

jQuery($ => { // DOM ready and $ alias in scope

  // Toggle popup on buttons click:
  $("[data-popup]").on("click", function() {
    const $popup = $(this.dataset.popup); // Pass the ID from data-popup attribute
    $popup.toggleClass("is-active");
  });

  // Close popup on "backdrop" click:
  $(".popup").on("click", function(evt) {
    if (evt.target === this) {
      $(this).toggleClass("is-active");
    }
  });

});

* {
  margin: 0;
  box-sizing: border-box;
}

.popup {
  display: flex;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: #0004;
  padding: 2rem;
  transition: opacity 0.4s;
  opacity: 0;
  pointer-events: none;
}

.popup.is-active {
  opacity: 1;
  pointer-events: auto;
}

.popup-content {
  margin: auto;
  background: white;
  border-radius: 4px;
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.3);
  padding: 1rem;
  max-width: 30rem;
  overflow: auto;
  max-height: 50vh;
}

<button type="button" data-popup="#popup-one">Open popup 1</button>
<button type="button" data-popup="#popup-two">Open popup 2</button>

<div class="popup" id="popup-one">
  <div class="popup-content">
    <button type="button" data-popup="#popup-one">Close</button>
    <h2>Popup one</h2>
    <p>Lorem one ipsum dolor sit amet, consectetur adipisicing elit. Maiores corporis nam earum qui exercitationem sapiente accusantium quas.</p>
  </div>
</div>

<div class="popup" id="popup-two">
  <div class="popup-content">
    <h2>Popup two</h2>
    <button type="button" data-popup="#popup-two">Close</button>
    <p>Lorem two ipsum dolor sit amet, consectetur adipisicing elit. Quisquam voluptate aut magnam quibusdam sit, molestiae, numquam beatae totam.</p>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

您需要将第二个锚点 Package 在<p>标记中，然后您可以更改：

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

字符串
致：

$(this).parent().next().show();

型
这将帮助您根据单击的.show-popup锚点定位.overlay-bg

**Fiddle Demo**第一个字符

添加一个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>

型