如何在Bootstrap模态框中动态加载Firebase实时数据库数据？

核心思路是给每个卡片绑定对应的数据，在模态框打开时读取这些数据并填充，替代固定内容。

步骤1：生成卡片时绑定数据 #

遍历Firebase返回的数据生成卡片时，把需要在模态框展示的字段（比如Feridos、Descrição）存储到卡片的自定义data-*属性中，方便点击时快速获取对应数据：

// 遍历Firebase数据快照
snapshot.forEach(childSnapshot => {
  const itemData = childSnapshot.val();
  // 创建卡片容器
  const card = document.createElement('div');
  card.classList.add('card', 'mb-3');
  
  // 绑定数据到卡片的data属性
  card.dataset.feridos = itemData.Feridos ?? '';
  card.dataset.descricao = itemData.Descricao ?? '';
  
  // 填充卡片可见内容（按需调整）
  card.innerHTML = `
    <div class="card-body">
      <h5 class="card-title">${itemData.Titulo}</h5>
      <p class="card-text">${itemData.Resumo}</p>
      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#detailModal">查看详情</button>
    </div>
  `;
  
  // 将卡片添加到页面容器
  document.getElementById('cards-container').appendChild(card);
});

步骤2：监听模态框事件，动态填充内容 #

利用Bootstrap模态框的show.bs.modal事件（模态框显示前触发），获取触发按钮所在的卡片，读取绑定的data属性，替换模态框内容：

const detailModal = document.getElementById('detailModal');

detailModal.addEventListener('show.bs.modal', function(event) {
  // 获取触发模态框的按钮
  const triggerBtn = event.relatedTarget;
  // 定位按钮所属的卡片
  const targetCard = triggerBtn.closest('.card');
  
  // 读取卡片绑定的数据
  const feridos = targetCard.dataset.feridos;
  const descricao = targetCard.dataset.descricao;
  
  // 构建模态框内容
  let modalContent = '';
  if (feridos) modalContent += `<p>Feridos: '${feridos}'</p>`;
  if (descricao) modalContent += `<p>Descrição: ${descricao}</p>`;
  
  // 替换模态框主体内容
  this.querySelector('.modal-body').innerHTML = modalContent;
});

注意事项 #

• 确保Firebase返回的数据字段名和代码中使用的一致（比如itemData.Feridos要匹配数据库中的键名）。
• 使用closest('.card')能精准定位触发按钮所属的卡片，避免多卡片场景下数据串位。
• 用空值合并运算符??处理字段不存在的情况，防止模态框显示undefined。

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