升级Bootstrap 5后后端调用Bootbox函数报错：$.fn.modal未定义

1. 脚本执行时机不匹配
   后端通过Page.RegisterStartupScript注册的脚本，会被输出到<form>标签内部，在页面DOM加载过程中就会执行，此时<head>中的Bootstrap、Bootbox等依赖脚本可能还未加载完成，因此找不到$.fn.modal方法。而$(document).ready()会等待所有DOM和脚本加载完成后再执行，所以直接调用能正常运行。

2. Bootbox版本兼容性问题
   Bootstrap 5已移除jQuery依赖，采用原生JS实现组件，但旧版Bootbox（v5及以下）仍依赖Bootstrap的jQuery模态框插件（即$.fn.modal），如果你的Bootbox版本未适配Bootstrap 5，就会触发该错误。

3. jQuery重复引入冲突
   你的ASPX代码中同时引入了jquery-1.12.4.js和jquery.min.js，重复引入会导致jQuery实例被覆盖，可能引发依赖加载异常。

1. 调整后端脚本执行时机 #

将后端注册的脚本用$(document).ready()包裹，确保依赖脚本加载完成后再执行：

protected void Page_Load(object sender, EventArgs e)
{
    string script = @"<script type='text/javascript'>
        $(document).ready(function(){
            AlertMessage();
        });
    </script>";
    Page.ClientScript.RegisterStartupScript(this.GetType(), "Getdata", script);
}

2. 升级Bootbox到兼容Bootstrap 5的版本 #

Bootbox从v6.x版本开始支持Bootstrap 5，替换现有bootbox.min.js为v6+版本，消除对Bootstrap jQuery插件的依赖。

3. 清理重复的jQuery引入 #

删除其中一个jQuery文件，保留压缩版即可：

<!-- 移除jquery-1.12.4.js，保留以下内容 -->
<script src="include/js/jquery.min.js" type="text/javascript"></script>
<script src="include/js/jquery-ui.min.js" type="text/javascript"></script>

4. 优化脚本加载顺序（可选） #

将所有脚本移至<body>标签末尾，确保DOM先加载完成，进一步提升脚本执行的可靠性：

<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>

    <!-- 脚本移至body末尾 -->
    <script src="include/js/jquery.min.js" type="text/javascript"></script>
    <script src="include/js/jquery-ui.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
    <script src="include/js/part/bootbox.min.js"></script>

    <script type="text/javascript">
        function AlertMessage() {
            bootbox.alert({
                title: "My title",
                message: "My Custom Message.....!!!"
            });
            return false;
        }
    </script>
</body>

1. 替换Bootbox为v6+版本
2. 删除重复的jQuery引入文件
3. 调整后端脚本为$(document).ready()包裹形式
4. 测试后端调用是否正常执行

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