使标题弹出窗口同时出现在多个元素上

<div class="popup-trigger">元素1</div>
<div class="popup-trigger">元素2</div>
<div class="popup-trigger">元素3</div>

<div class="popup" id="popup1">
  <h3>弹出窗口标题1</h3>
  <p>弹出窗口内容1</p>
</div>

<div class="popup" id="popup2">
  <h3>弹出窗口标题2</h3>
  <p>弹出窗口内容2</p>
</div>

<div class="popup" id="popup3">
  <h3>弹出窗口标题3</h3>
  <p>弹出窗口内容3</p>
</div>

.popup {
  display: none;
  position: absolute;
  top: -9999px;
  left: -9999px;
  /* 添加其他样式以美化弹出窗口 */
}

// 获取所有具有共同类名的元素
var triggers = document.querySelectorAll('.popup-trigger');

// 为每个元素绑定点击事件处理函数
triggers.forEach(function(trigger) {
  trigger.addEventListener('click', function() {
    // 获取对应的弹出窗口ID
    var popupId = this.getAttribute('data-popup-id');
    
    // 显示对应的弹出窗口
    var popup = document.getElementById(popupId);
    popup.style.display = 'block';
  });
});