如何点击按钮时将按钮ID传递至Modal（模态框）内容区域？

没问题，这是Bootstrap模态框里很常见的需求，我给你提供一个简洁可靠的实现方案，基于Bootstrap的内置事件来做：

步骤1：给模态框添加一个用于显示ID的容器 #

首先，在你的模态框内容区域（比如modal-body里）加一个专门的元素，用来放置按钮的ID。比如：

<div class="modal-body">
  <!-- 其他内容 -->
  <p>触发按钮的ID是：<span id="trigger-btn-id"></span></p>
</div>

步骤2：监听模态框的show.bs.modal事件 #

Bootstrap模态框提供了show.bs.modal事件，这个事件会在模态框即将显示的时候触发，刚好可以在这里获取到触发它的按钮元素。我们用jQuery来监听这个事件：

$('#myModal2').on('show.bs.modal', function (e) {
  // 获取触发模态框的按钮元素
  const triggerBtn = e.relatedTarget;
  // 获取按钮的ID
  const btnId = triggerBtn.id;
  // 将ID插入到模态框的容器中
  $('#trigger-btn-id').text(btnId);
});

完整代码示例 #

把你的现有代码和上面的修改整合起来，大概是这样：

<!-- 按钮部分 -->
<td>
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2" id="${q.id}">Confirm</button>
</td>

<!-- 模态框部分 -->
<div class="modal fade" id="myModal2" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">确认操作</h4>
      </div>
      <div class="modal-body">
        <p>你点击的按钮ID是：<span id="trigger-btn-id"></span></p>
        <!-- 这里可以添加其他模态框内容 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
    </div>
  </div>
</div>

<!-- jQuery脚本（确保在Bootstrap JS之前引入jQuery） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$('#myModal2').on('show.bs.modal', function (e) {
  const triggerBtn = e.relatedTarget;
  const btnId = triggerBtn.id;
  $('#trigger-btn-id').text(btnId);
});
</script>

为什么这个方案好用？ #

• 利用Bootstrap原生事件，不需要额外绑定按钮的点击事件，避免重复代码
• e.relatedTarget是Bootstrap专门提供的属性，直接指向触发模态框的元素，非常可靠
• 不管你有多少个按钮触发同一个模态框，这个逻辑都能自动适配，不用给每个按钮单独写事件

如果你的项目用的是Bootstrap 5（不依赖jQuery），也可以用原生JS实现，逻辑是一样的：

document.getElementById('myModal2').addEventListener('show.bs.modal', function (e) {
  const triggerBtn = e.relatedTarget;
  const btnId = triggerBtn.id;
  document.getElementById('trigger-btn-id').textContent = btnId;
});

内容的提问来源于stack exchange，提问作者Ashwin Karki