Bootstrap 5模态框(Modal)移动端无法显示问题求助

你的模态框代码结构本身是正确的，移动端无法弹出通常是以下几个配置遗漏或错误导致，逐一排查修复：

• 必须引入Bootstrap 5的JavaScript文件及依赖
  Bootstrap 5的模态框功能依赖自身JS和Popper.js（用于弹窗定位），确保在页面中按顺序引入这两个文件，建议放在</body>标签前：

  <!-- 引入Popper.js -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
  <!-- 引入Bootstrap 5 JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
  

  如果你用本地文件，确保路径正确，且文件版本匹配。

• 添加移动端视口(viewport)元标签
  移动端页面必须设置视口元标签，否则Bootstrap的响应式机制失效，可能导致模态框无法触发。在<head>中添加：

  <meta name="viewport" content="width=device-width, initial-scale=1">
  

• 排查JavaScript冲突
  检查页面中是否有其他JavaScript代码阻止了按钮的点击事件，比如自定义的点击事件监听、事件阻止冒泡的代码。可以临时移除其他JS代码测试，确认是否是冲突导致。

• 确保按钮被识别为可点击元素
  极少数情况下，移动端触摸事件可能被样式干扰，给触发按钮添加样式确保它被识别为可点击元素：

  .btn-primary {
    cursor: pointer;
  }
  

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