Bootstrap Modal点击关闭按钮或叉号无法关闭问题求助

你的问题核心出在模态框内容的更新方式：你在脚本里用innerHTML直接替换了整个#modal-container的内容，把原本带有data-dismiss="modal"属性的关闭按钮（右上角的×和底部的Close按钮）全部覆盖，导致点击事件完全无法触发。

另外你提到的data-bs-dismiss是Bootstrap 5的专属属性，而你使用的是Bootstrap 4，对应的正确关闭属性就是你代码里的data-dismiss="modal"——版本不匹配才让你觉得那些解决方案无效。

修复步骤 #

不要替换整个模态框容器，只更新需要变动的标题和主体部分：

• 在脚本中定位模态框的标题、主体元素，而非整个容器
• 仅修改这两个元素的内容，保留原有的头部关闭按钮和底部操作栏

修改后的示例代码（以你的showModal函数为例） #

function showModal(pokemon) {
  // 定位模态框的标题和主体区域
  const modalTitle = document.querySelector('#modal-container .modal-title');
  const modalBody = document.querySelector('#modal-container .modal-body');
  
  // 更新模态框标题
  modalTitle.textContent = pokemon.name;
  
  // 更新模态框主体内容
  modalBody.innerHTML = `
    <img src="${pokemon.imageUrl}" alt="${pokemon.name}" class="img-fluid">
    <p>身高: ${pokemon.height}</p>
    <p>体重: ${pokemon.weight}</p>
    <h3>类型:</h3>
    <ul>
      ${pokemon.types.map(type => `<li>${type}</li>`).join('')}
    </ul>
  `;
  
  // 调用Bootstrap方法显示模态框
  $('#modal-container').modal('show');
}

修改后原有的关闭按钮会被保留，data-dismiss="modal"属性能正常触发关闭事件，模态框即可正常关闭。

内容的提问来源于stack exchange，提问作者Madison T.