如何在点击模态框关闭按钮时判断触发模态框的源按钮

嘿，这个需求很常见，咱们可以通过Bootstrap模态框的事件机制轻松搞定，核心思路就是在模态框打开时记录下触发它的按钮，关闭时再读取这个记录来判断。下面给你两种具体的实现方式：

方法一：利用Bootstrap原生模态框事件 #

Bootstrap的模态框提供了show.bs.modal事件，这个事件会在模态框显示前触发，并且能直接拿到触发它的元素（event.relatedTarget）。我们可以把这个按钮的标识（比如自定义属性、ID）存在模态框的data属性里，等关闭时再取出来判断。

首先给你的按钮加上唯一标识（比如data-id）：

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" data-id="edit-btn-1">Edit</button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" data-id="edit-btn-2">Edit</button>

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Edit Modal</h4>
      </div>
      <div class="modal-body">
        <p>Modal content goes here...</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

然后添加JavaScript代码处理事件：

// 模态框显示前，存储触发按钮的标识
$('#myModal').on('show.bs.modal', function(event) {
  // 获取触发模态框的按钮元素
  const triggerButton = $(event.relatedTarget);
  // 取出按钮的唯一标识（这里用data-id，你也可以用id或者其他属性）
  const buttonId = triggerButton.data('id');
  // 把标识存在模态框的data属性中
  $(this).data('trigger-button', buttonId);
});

// 模态框关闭时，读取存储的标识并判断
$('#myModal').on('hidden.bs.modal', function() {
  const triggerButtonId = $(this).data('trigger-button');
  
  if (triggerButtonId === 'edit-btn-1') {
    console.log('关闭的是第一个按钮触发的模态框');
    // 这里写你需要执行的逻辑
  } else if (triggerButtonId === 'edit-btn-2') {
    console.log('关闭的是第二个按钮触发的模态框');
    // 这里写你需要执行的逻辑
  }
});

方法二：手动绑定按钮点击事件 #

如果你不想依赖Bootstrap的原生事件，也可以给每个按钮绑定点击事件，手动打开模态框并存储触发按钮的信息：

// 给所有触发模态框的按钮绑定点击事件
$('.btn-success[data-target="#myModal"]').click(function() {
  const buttonId = $(this).data('id');
  // 存储按钮标识并手动打开模态框
  $('#myModal').data('trigger-button', buttonId).modal('show');
});

// 关闭时的判断逻辑和方法一一致
$('#myModal').on('hidden.bs.modal', function() {
  const triggerButtonId = $(this).data('trigger-button');
  // 执行你的判断逻辑...
});

小提示 #

• 如果你的按钮已经有唯一的id属性，也可以直接用triggerButton.attr('id')来获取标识，不用额外加data-id。
• 不要用按钮的文本内容（比如"Edit"）作为标识，因为文本可能会变动，不够稳定。

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