bootstrap 弹窗 如何传递参数

在 Bootstrap 弹窗中传递参数可以使用 data-* 属性，你可以在弹窗的触发元素中添加 data-* 属性来传递参数，然后在弹窗中使用 JavaScript 获取这些参数。

例如，假设你要在弹窗中显示一个用户的信息，你可以在触发元素中添加 data-user-id 属性，然后在弹窗中使用 JavaScript 获取这个属性的值，再通过 Ajax 请求获取用户信息并显示在弹窗中。

触发元素的 HTML 代码：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#userModal" data-user-id="123">查看用户信息</button>

弹窗的 HTML 代码：

<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="userModalLabel">用户信息</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 这里显示用户信息 -->
      </div>
    </div>
  </div>
</div>

弹窗的 JavaScript 代码：

$('#userModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // 触发弹窗的按钮
  var userId = button.data('user-id'); // 获取用户 ID
  var modal = $(this);
  // 发送 Ajax 请求并显示用户信息
  $.ajax({
    url: '/user/' + userId,
    success: function (data) {
      modal.find('.modal-body').html(data);
    }
  });
});

注意，data-* 属性的名称必须以 data- 开头，后面可以跟任何字符，例如 data-user-id、data-foo、data-bar 等。在 JavaScript 中使用 $(element).data('name') 可以获取 data-name 属性的值。在 Bootstrap 的弹窗中，可以使用 show.bs.modal 事件来在弹窗显示之前获取参数并进行处理。