好问题！用Bootstrap模态框来替换Leaflet自带的bindPopup确实能让弹窗样式更灵活，还能轻松添加标题、按钮等自定义元素，我来给你详细说下实现步骤：

1. 先在HTML中准备Bootstrap模态框结构 #

首先你需要在页面里添加一个Bootstrap模态框的基础结构，包含标题栏、内容区域和关闭按钮：

<!-- Bootstrap模态框 -->
<div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="mapModalLabel">弹窗标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="modalBody">
        <!-- 这里会填充Leaflet图层点击后的内容 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <!-- 可以在这里添加自定义按钮，比如确认、详情等 -->
      </div>
    </div>
  </div>
</div>

2. 给Leaflet图层绑定点击事件，触发模态框 #

不再使用bindPopup，而是给图层添加click事件监听器，点击时填充模态框内容并显示它：

// 初始化Leaflet地图
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// 示例图层（比如一个标记点）
var marker = L.marker([51.5, -0.09]).addTo(map);

// 绑定点击事件
marker.on('click', function() {
  // 1. 准备要填充的内容（就是你原来的table）
  var popupContent = '<table class="table table-bordered">' +
    '<thead><tr><th>表头1</th><th>表头2</th></tr></thead>' +
    '<tbody><tr><td>内容1</td><td>内容2</td></tr></tbody>' +
    '</table>';
  
  // 2. 填充模态框的标题和内容
  document.getElementById('mapModalLabel').textContent = '我的自定义弹窗标题';
  document.getElementById('modalBody').innerHTML = popupContent;
  
  // 3. 显示Bootstrap模态框
  var modal = new bootstrap.Modal(document.getElementById('mapModal'));
  modal.show();
});

关键说明 #

• 为什么不用bindPopup？因为Bootstrap模态框是独立于Leaflet地图的页面组件，不属于Leaflet的弹窗体系，所以需要通过点击事件手动触发。
• 你可以完全自定义模态框的样式：比如调整对话框大小、添加更多按钮、修改标题样式等，都可以通过Bootstrap的类或者自定义CSS实现。
• 如果有多个图层，只需要给每个图层绑定同样的点击逻辑，动态替换标题和内容即可。

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