单页面多个Bootstrap Modal无需重复代码的实现方案咨询

核心思路是所有触发按钮共用同一个模态框结构，利用Bootstrap模态框自带的show.bs.modal事件读取触发按钮的自定义数据，动态填充到模态框对应位置。

步骤1：调整触发按钮结构 #

给所有触发按钮新增自定义data-*属性存储对应模态框要展示的内容，所有按钮的data-target统一指向同一个公共模态框ID即可：

<!-- 按钮1 -->
<button type="button" class="btn btn-dark" 
  data-toggle="modal" 
  data-target="#commonModal"
  data-title="示例标题1"
  data-img="图片1地址"
  data-img-alt="图片1说明"
  data-content="模态框1正文内容">
  Read more
</button>

<!-- 按钮2 -->
<button type="button" class="btn btn-dark" 
  data-toggle="modal" 
  data-target="#commonModal"
  data-title="示例标题2"
  data-img="图片2地址"
  data-img-alt="图片2说明"
  data-content="模态框2正文内容">
  Read more
</button>

<!-- 可无限新增按钮，无需新增模态框代码 -->

步骤2：保留唯一公共模态框模板 #

全局只需要写一次模态框结构，不用给每个按钮单独配模态框：

<div class="modal fade" id="commonModal" tabindex="-1" role="dialog" aria-labelledby="commonModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="commonModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img src="" alt="" class="img-fluid mb-5" id="modalImg" />
        <p id="modalContent"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

步骤3：添加动态填充逻辑 #

Bootstrap 4 版本代码： #

$('#commonModal').on('show.bs.modal', function (event) {
  // 获取触发当前模态框的按钮元素
  const triggerBtn = $(event.relatedTarget)
  // 读取按钮上存储的自定义数据
  const title = triggerBtn.data('title')
  const imgSrc = triggerBtn.data('img')
  const imgAlt = triggerBtn.data('img-alt')
  const content = triggerBtn.data('content')
  // 填充到模态框对应位置
  const modal = $(this)
  modal.find('.modal-title').text(title)
  modal.find('#modalImg').attr('src', imgSrc).attr('alt', imgAlt)
  modal.find('#modalContent').text(content)
})

Bootstrap 5 版本代码： #

const commonModal = document.getElementById('commonModal')
commonModal.addEventListener('show.bs.modal', event => {
  const triggerBtn = event.relatedTarget
  const title = triggerBtn.getAttribute('data-title')
  const imgSrc = triggerBtn.getAttribute('data-img')
  const imgAlt = triggerBtn.getAttribute('data-img-alt')
  const content = triggerBtn.getAttribute('data-content')

  commonModal.querySelector('.modal-title').textContent = title
  commonModal.querySelector('#modalImg').src = imgSrc
  commonModal.querySelector('#modalImg').alt = imgAlt
  commonModal.querySelector('#modalContent').textContent = content
})

补充说明 #

你原代码存在属性对应错误：按钮的data-target属性应该填写模态框的ID，你原来写的是模态框标题的ID，会导致模态框触发失效，按上述方案调整即可。
如果模态框内容比较复杂，也可以把内容提前写在页面隐藏容器中，JS读取对应容器的HTML内容填充到模态框即可，无需存在data-*属性里。

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