bootstrap弹出多个模态框_扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框...

要实现多个弹出框，可以通过动态创建多个模态框的方式来实现。以下是一种实现方法：

1. 在 HTML 中添加一个按钮，用于触发弹出框：

<button id="btnOpenModal" class="btn btn-primary">打开模态框</button>

2. 在 JavaScript 中编写代码，用于动态创建模态框：

// 模态框计数器，用于生成唯一的 ID
var modalCount = 0;

// 创建模态框函数
function createModal() {
  // 创建模态框 HTML
  var modalHTML = '<div id="modal' + modalCount + '" class="modal fade" tabindex="-1" role="dialog">';
  modalHTML += '<div class="modal-dialog" role="document">';
  modalHTML += '<div class="modal-content">';
  modalHTML += '<div class="modal-header">';
  modalHTML += '<h5 class="modal-title">模态框标题</h5>';
  modalHTML += '<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
  modalHTML += '<span aria-hidden="true">&times;</span>';
  modalHTML += '</button>';
  modalHTML += '</div>';
  modalHTML += '<div class="modal-body">';
  modalHTML += '<p>模态框内容</p>';
  modalHTML += '</div>';
  modalHTML += '<div class="modal-footer">';
  modalHTML += '<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>';
  modalHTML += '<button type="button" class="btn btn-primary">保存</button>';
  modalHTML += '</div>';
  modalHTML += '</div>';
  modalHTML += '</div>';
  modalHTML += '</div>';

  // 将模态框 HTML 添加到页面中
  $('body').append(modalHTML);

  // 增加计数器，确保每个模态框具有唯一的 ID
  modalCount++;

  // 返回最新创建的模态框的 ID
  return 'modal' + (modalCount - 1);
}

3. 在 JavaScript 中编写代码，用于打开模态框：

// 点击按钮时打开模态框
$('#btnOpenModal').click(function () {
  // 创建一个新的模态框
  var modalId = createModal();

  // 打开新的模态框
  $('#' + modalId).modal('show');
});

这样就可以通过点击按钮来打开多个模态框了。每次点击按钮时，都会动态创建一个新的模态框，并打开它。注意，这里使用了 jQuery 和 Bootstrap 的 JavaScript 插件。