ASP.NET后台代码无法打开Bootstrap 5模态框问题求助

API 探路者

2026-8-24

问题原因分析

你遇到的Uncaught ReferenceError: openModal is not defined错误主要有两个核心原因：

函数作用域问题：如果你的openModal函数写在$(document).ready()这类局部作用域内，后台注册的启动脚本会在全局作用域查找该函数，自然找不到。
Bootstrap 5 API 不兼容：Bootstrap 5已移除对jQuery的依赖，你用的$('#ErrModal').modal('show')是Bootstrap 3/4的jQuery调用方式，在Bootstrap 5中无法生效。

修复步骤

1. 修正模态框调用脚本

把客户端脚本改成Bootstrap 5原生JS写法，并且确保函数在全局作用域定义：

function openModal() {
    // 使用Bootstrap 5原生API初始化并显示模态框
    const errModal = new bootstrap.Modal(document.getElementById('ErrModal'));
    errModal.show();
}

注意：不要把这个函数放在$(function(){})或其他局部作用域里，直接写在<script>标签中（比如页面<head>或<body>最上方），保证后台注册的启动脚本执行时，函数已存在。

2. 检查脚本加载顺序

确保页面先加载Bootstrap 5的JS文件，再加载自定义的openModal函数脚本，最后执行后台注册的启动脚本。典型加载顺序如下：

<!-- 加载Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 加载Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 定义全局的openModal函数 -->
<script>
function openModal() {
    const errModal = new bootstrap.Modal(document.getElementById('ErrModal'));
    errModal.show();
}
</script>

3. 调整后台注册脚本（可选）

如果页面使用了ScriptManager（比如带UpdatePanel的场景），建议改用ScriptManager.RegisterStartupScript替代ClientScript.RegisterStartupScript，确保脚本在正确时机执行：

lblMsg.Text = ex.StatusCode.ToString();
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);

若未使用ScriptManager，原ClientScript写法可保留，但需确保页面无其他脚本冲突。

4. 修复模态框按钮样式错误

你的模态框关闭按钮类名有误：btn-btn-primary应改为btn-primary，否则按钮样式失效：

<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>

验证测试

完成以上修改后，触发注册逻辑时，后台会将错误信息赋值给lblMsg，随后注册启动脚本调用全局的openModal函数，通过Bootstrap 5原生API即可正确弹出模态框。

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