Bootstrap modal页面加载时无法弹出但点击按钮可正常触发如何解决？

故障原因及修复方案 #

• 依赖引入顺序错误
  Bootstrap 3/4版本的模态框组件依赖jQuery，必须保证先引入jQuery文件，再引入Bootstrap的JS文件，顺序颠倒会导致modal()方法无法被正常识别。
• window.onload事件被覆盖
  如果页面中有多段脚本都绑定了window.onload事件，只有最后一段绑定的逻辑会生效，你的自动弹出逻辑可能被其他脚本覆盖。建议替换成jQuery的DOM就绪事件：

$(document).ready(function() {
    $('#myModal').modal('show');
})

• Bootstrap版本不匹配
  如果你使用的是Bootstrap 5及以上版本，已经移除了对jQuery的依赖，用jQuery调用modal()方法会失效，需要改用原生JS调用：

window.onload = function() {
    const myModal = new bootstrap.Modal(document.getElementById('myModal'));
    myModal.show();
}

• 快速排查方式
  打开浏览器控制台查看是否有$ is not defined或者modal is not a function类报错，可以直接定位是依赖未加载还是方法调用错误的问题。

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