如何在每个触发器的触发器上动态显示bootstrap-5模态的位置

<button id="trigger1" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">打开模态框</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>模态框内容</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

document.getElementById("trigger1").addEventListener("click", function() {
  var modal = new bootstrap.Modal(document.getElementById("myModal"));
  modal.show();
  
  // 设置模态框的位置
  var trigger = document.getElementById("trigger1");
  var triggerRect = trigger.getBoundingClientRect();
  var modalDialog = document.querySelector(".modal-dialog");
  var modalDialogRect = modalDialog.getBoundingClientRect();
  
  var top = triggerRect.top + triggerRect.height + 10; // 设置模态框距离触发器底部的距离
  var left = triggerRect.left + (triggerRect.width - modalDialogRect.width) / 2; // 设置模态框水平居中
  
  modalDialog.style.top = top + "px";
  modalDialog.style.left = left + "px";
});