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

在每个触发器的触发器上动态显示 Bootstrap 5 模态的位置，可以通过以下步骤实现：

首先，确保你已经引入了 Bootstrap 5 的相关文件，包括 CSS 和 JavaScript 文件。
在 HTML 中，为每个触发器添加一个唯一的标识符（ID），以便在 JavaScript 中使用。例如：

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

创建一个模态框的 HTML 结构，包括模态框的内容和位置。例如：

<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>

使用 JavaScript 监听每个触发器的点击事件，并在触发时动态设置模态框的位置。例如：

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";
});

在上述代码中，我们使用了 Bootstrap 5 的 Modal 组件来创建模态框，并使用 JavaScript 中的 getBoundingClientRect() 方法获取触发器和模态框的位置信息，然后通过设置模态框的 top 和 left 样式属性来调整模态框的位置。

请注意，以上代码仅为示例，实际应用中可能需要根据具体情况进行调整。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。