如何根据按钮单击更改Bootstrap模式内容

在Bootstrap中，您可以使用JavaScript（或jQuery）来监听按钮的单击事件，并根据需要更改模态框（Modal）的内容。以下是一个简单的示例，展示了如何实现这一功能：

HTML部分

<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 这里是模态框的内容，将会被JavaScript动态更改 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

JavaScript部分

// 当文档加载完成后执行
$(document).ready(function() {
  // 监听按钮的单击事件
  $('button[data-toggle="modal"]').on('click', function() {
    // 获取按钮上的自定义数据属性（如果有的话）
    var customData = $(this).data('custom-data');
    
    // 根据需要更改模态框的内容
    if (customData) {
      $('#myModal .modal-body').html('<p>这是根据按钮自定义数据更改的内容。</p>');
    } else {
      $('#myModal .modal-body').html('<p>这是默认的模态框内容。</p>');
    }
  });
});