如何用原生JS在Bootstrap3.3.7中点击Google地图Marker打开模态框

Bootstrap 3的模态框默认依赖jQuery来控制显示/隐藏，但我们可以用原生JavaScript手动模拟它的行为，在Marker点击事件中打开myModal。以下是完整实现步骤：

1. Marker点击事件中打开模态框 #

修改你的Marker点击监听器，添加原生JS代码来触发模态框显示：

myMarker.addListener('click', function () {
  // 获取目标模态框元素
  const modal = document.getElementById('myModal');
  
  // 1. 显示模态框：添加Bootstrap的激活类并设置显示样式
  modal.classList.add('in');
  modal.style.display = 'block';
  modal.setAttribute('aria-hidden', 'false');
  
  // 2. 创建并添加模态框背景遮罩（若页面中不存在）
  let backdrop = document.querySelector('.modal-backdrop');
  if (!backdrop) {
    backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop fade in';
    document.body.appendChild(backdrop);
  } else {
    backdrop.classList.add('in');
  }
  
  // 3. 给body添加类，禁止页面滚动
  document.body.classList.add('modal-open');
});

2. 原生JS处理模态框关闭逻辑 #

由于原关闭按钮的data-dismiss="modal"是jQuery绑定的事件，我们需要给关闭按钮添加原生JS的点击事件来处理关闭：

// 获取所有带data-dismiss="modal"的按钮（包括右上角叉号和底部Close按钮）
const closeTriggers = document.querySelectorAll('[data-dismiss="modal"]');

closeTriggers.forEach(trigger => {
  trigger.addEventListener('click', () => {
    const modal = document.getElementById('myModal');
    const backdrop = document.querySelector('.modal-backdrop');
    
    // 1. 隐藏模态框
    modal.classList.remove('in');
    modal.style.display = 'none';
    modal.setAttribute('aria-hidden', 'true');
    
    // 2. 移除背景遮罩（配合Bootstrap的淡出动画延迟移除）
    if (backdrop) {
      backdrop.classList.remove('in');
      setTimeout(() => {
        if (backdrop.parentNode) backdrop.parentNode.removeChild(backdrop);
      }, 300); // 300ms对应Bootstrap的fade动画时长
    }
    
    // 3. 恢复页面滚动
    document.body.classList.remove('modal-open');
  });
});

说明 #

这段代码完全模拟了Bootstrap 3模态框的原生jQuery行为：包括添加/移除in类控制显示状态、管理背景遮罩、锁定/解锁页面滚动，全程不需要依赖jQuery，纯原生JS实现，完美匹配你的需求。

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