Bootstrap 5添加fade类后模态框无法显示问题求助

核心问题原因 #

你的问题是模态框调用方法错误、依赖不完整两个核心问题导致的，对应表现就是加fade类无法弹出，移除后无遮罩无动画。 #

具体修复步骤 #

1. 修正模态框调用代码 #

Bootstrap 5 不支持你当前混用jQuery和原生API的调用方式，根据你使用的技术栈选对应写法：

• 如果你使用jQuery适配调用：

// 直接传入show参数即可，不需要单独调用实例的show方法
$("#forgot_block").modal('show');

• 如果你使用原生JS调用：

// 先初始化Bootstrap模态框原生实例，再调用show方法
const modalDom = document.getElementById('forgot_block')
const modalInstance = new bootstrap.Modal(modalDom)
modalInstance.show()

2. 检查脚本依赖是否完整 #

Bootstrap 5 模态框的动画、定位、遮罩功能都依赖Popper.js，必须引入带Popper的Bootstrap JS bundle包，引入顺序如下：

<!-- 第一步引入Bootstrap 5 CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<!-- 如果使用jQuery，需要在Bootstrap JS之前引入jQuery -->
<script src="jquery.min.js"></script>
<!-- 第二步引入带Popper的Bootstrap 5 JS bundle -->
<script src="bootstrap.bundle.min.js"></script>

3. 修复HTML语法错误 #

你当前代码中input标签的onkeyup事件少了右括号，可能导致全局JS报错阻塞Bootstrap脚本执行，修正后代码：

<input type="text" name="current_email" id="current_email" placeholder="email address" size="40" onkeyup="checkKey(event,'sendPassword_exec')">

额外排查点 #

如果修复后还有异常，按以下顺序排查：

• 打开浏览器控制台检查是否有JS报错，比如modal is not a function、Popper is not defined，都是依赖缺失的典型报错
• 检查是否有自定义CSS覆盖了.modal、.modal-backdrop的transition、opacity、z-index属性，或者其他第三方UI库（比如你代码中用到的jQuery UI）和Bootstrap样式冲突
• 不要重复初始化同一个模态框实例，避免状态混乱

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