如何从单个HTML文件为多个Bootstrap模态框导入不同内容

没问题！要在同一个页面里用Bootstrap模态框分别加载不同的内容片段，其实有两种很实用的方法，我给你详细说说：

方法一：为每个内容单独创建模态框（直观易懂） #

这种方法适合内容不多的场景，每个模态框对应一个内容片段，逻辑清晰，容易维护。

完整代码示例 #

<!-- 引入Bootstrap 4依赖（如果用Bootstrap 5，替换成对应的CDN即可） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalOne">
  打开第一个模态框
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalTwo">
  打开第二个模态框
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalThree">
  打开第三个模态框
</button>

<!-- 隐藏的内容片段（用Bootstrap的d-none类隐藏，避免在页面显示） -->
<div id="one" class="d-none">
  <h1>this is the first content.</h1>
</div>
<div id="two" class="d-none">
  <h1>this is the second content.</h1>
</div>
<div id="three" class="d-none">
  <h1>this is the third content.</h1>
</div>

<!-- 第一个模态框 -->
<div class="modal fade" id="modalOne" tabindex="-1" aria-labelledby="modalOneLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalOneLabel">第一个模态框</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modalOneBody"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 第二个模态框 -->
<div class="modal fade" id="modalTwo" tabindex="-1" aria-labelledby="modalTwoLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTwoLabel">第二个模态框</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modalTwoBody"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 第三个模态框 -->
<div class="modal fade" id="modalThree" tabindex="-1" aria-labelledby="modalThreeLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalThreeLabel">第三个模态框</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modalThreeBody"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script>
// 监听模态框显示事件，动态插入对应内容
$('#modalOne').on('show.bs.modal', function () {
  // 克隆内容片段并移除隐藏类，插入到模态框主体
  $('#modalOneBody').html($('#one').clone().removeClass('d-none'));
});

$('#modalTwo').on('show.bs.modal', function () {
  $('#modalTwoBody').html($('#two').clone().removeClass('d-none'));
});

$('#modalThree').on('show.bs.modal', function () {
  $('#modalThreeBody').html($('#three').clone().removeClass('d-none'));
});
</script>

关键说明 #

• 我们把原始的三个内容div用d-none类隐藏，避免它们在页面上直接显示。
• 借助Bootstrap的show.bs.modal事件，在模态框即将弹出时，克隆对应内容片段并插入到模态框的主体区域。这样内容只需要写一次，不用重复复制。

方法二：复用单个模态框（更简洁高效） #

如果需要的模态框数量较多，推荐这种方法——只需要一个模态框，通过按钮的自定义属性来指定要加载的内容，代码复用性更高。

完整代码示例 #

<!-- 引入Bootstrap依赖 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 触发模态框的按钮，通过data-content-id指定要加载的内容ID -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalGeneric" data-content-id="one">
  打开第一个模态框
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalGeneric" data-content-id="two">
  打开第二个模态框
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalGeneric" data-content-id="three">
  打开第三个模态框
</button>

<!-- 隐藏的内容片段 -->
<div id="one" class="d-none">
  <h1>this is the first content.</h1>
</div>
<div id="two" class="d-none">
  <h1>this is the second content.</h1>
</div>
<div id="three" class="d-none">
  <h1>this is the third content.</h1>
</div>

<!-- 通用模态框 -->
<div class="modal fade" id="modalGeneric" tabindex="-1" aria-labelledby="modalGenericLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalGenericLabel">模态框</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modalGenericBody"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script>
// 通用的模态框内容加载逻辑
$('#modalGeneric').on('show.bs.modal', function (event) {
  // 获取触发按钮的自定义属性值
  const triggerBtn = $(event.relatedTarget);
  const contentId = triggerBtn.data('content-id');
  
  // 获取并克隆对应内容片段
  const content = $('#' + contentId).clone().removeClass('d-none');
  
  // 更新模态框的标题和内容
  const modal = $(this);
  modal.find('.modal-title').text(`第${contentId.replace(/\d/, num => parseInt(num)+1)}个模态框`);
  modal.find('.modal-body').html(content);
});
</script>

关键说明 #

• 给每个触发按钮添加data-content-id属性，值对应内容片段的ID。
• 在模态框的显示事件中，通过event.relatedTarget获取触发按钮，进而拿到要加载的内容ID，最后动态更新模态框的标题和内容。

注意事项 #

• 如果使用Bootstrap 5，只需要把属性从data-toggle改成data-bs-toggle，data-target改成data-bs-target即可，JS逻辑基本一致。
• 克隆内容片段的方式可以保证每次打开模态框都能获取最新的内容状态，适合内容可能动态变化的场景。

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