点击HTML卡片获取数据并填充至Bootstrap Modal的实现方法

• 修复表单控件ID重复问题：当前模态框内两个输入框共用了id="recipient-name"，会导致DOM选择失败，先给三个表单控件分配唯一ID。
• 给模态框触发链接绑定自定义数据属性：在卡片的点击唤起链接上，通过data-*属性提前存储当前服务的名称、价格、介绍信息，避免点击时再层层遍历DOM取数。
• 添加模态框事件监听：利用Bootstrap 5原生提供的模态框唤起事件，读取触发元素上存储的服务数据，直接填充到对应表单控件中。

具体代码修改 #

1. 修改卡片触发链接部分 #

把原来卡片里写死data-bs-whatever的a标签替换为以下代码，同时把空href替换为无跳转地址，避免点击触发默认跳页：

<a href="javascript:void(0)" class="text-reset stretched-link"
  data-bs-toggle="modal" data-bs-target="#exampleModal"
  data-service-name="{{ $service->name }}"
  data-service-price="{{ $service->from }}$ - {{ $service->to }}$"
  data-service-info="{{ e($service->info) }}">
  <h5 class="card-title mb-3">{{ $service->name }}</h5>
</a>

这里用e()函数转义服务介绍字段的特殊字符，避免字段内的引号、HTML标签导致data属性解析异常。

2. 修改模态框表单部分 #

把原来ID重复的表单控件替换为以下代码，给每个控件分配唯一ID：

<form>
  <div class="mb-3">
    <label for="service-name" class="col-form-label">Service:</label>
    <input type="text" class="form-control" id="service-name">
  </div>

  <div class="mb-3">
    <label for="service-price" class="col-form-label">price:</label>
    <input type="text" class="form-control" id="service-price">
  </div>

  <div class="mb-3">
    <label for="message-text" class="col-form-label">info:</label>
    <textarea class="form-control" id="message-text"></textarea>
  </div>
</form>

3. 添加JS逻辑 #

把以下代码放在页面引入Bootstrap JS脚本的后面即可，不需要引入额外依赖：

const serviceModal = document.getElementById('exampleModal')
serviceModal.addEventListener('show.bs.modal', function (event) {
  // 获取触发当前模态框的DOM元素（即点击的卡片链接）
  const triggerLink = event.relatedTarget
  // 读取元素上存储的服务数据
  const serviceData = {
    name: triggerLink.dataset.serviceName,
    price: triggerLink.dataset.servicePrice,
    info: triggerLink.dataset.serviceInfo
  }
  // 给模态框内控件赋值
  this.querySelector('.modal-title').textContent = `服务详情：${serviceData.name}`
  this.querySelector('#service-name').value = serviceData.name
  this.querySelector('#service-price').value = serviceData.price
  this.querySelector('#message-text').value = serviceData.info
})

实现原理 #

Bootstrap 5模态框在弹出前会触发show.bs.modal事件，事件对象自带的relatedTarget属性会直接返回触发模态框的DOM元素，提前把服务数据存在触发元素的data-*属性上，弹出时直接读取即可，逻辑稳定兼容性好，不需要额外处理事件冒泡、父元素查找的问题。

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