调用modal('show')报错Uncaught TypeError: modal is not a function求助

1 报错根因 #

Uncaught TypeError: $(...).html(...).modal is not a function 报错是因为modal是Bootstrap框架提供的jQuery扩展方法，触发条件如下：

• 未引入Bootstrap对应的JS文件
• 引入顺序错误：必须先引入jQuery，再引入Bootstrap JS文件，否则Bootstrap无法将modal方法挂载到jQuery实例上
• 重复引入jQuery：后引入的jQuery会覆盖之前已挂载Bootstrap方法的jQuery实例，导致方法丢失
• Bootstrap版本与jQuery版本不兼容

2 第一步：修正资源引入顺序 #

修改grid.cshtml文件，按如下顺序引入资源，注意需要先引入Bootstrap依赖的基础文件再加载自定义JS：

<!-- 先引入jQuery -->
<script src="@Url.Content("~/js/jquery.min.js")" type="text/javascript"></script>
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="@Url.Content("~/css/bootstrap.min.css")">
<!-- 引入Bootstrap JS -->
<script src="@Url.Content("~/js/bootstrap.min.js")" type="text/javascript"></script>
<!-- 最后引入自定义Grid.js -->
<script src="@Url.Content("~/js/Grid.js")" type="text/javascript"></script>
<div id="login_for_review" class="modal fade" role="dialog"></div>

3 第二步：修正弹窗逻辑实现ID水平展示 #

你当前代码直接将返回的JSON数组传入html()方法属于逻辑错误，需要先将ID数组拼接为水平展示的HTML结构，同时补全Bootstrap Modal要求的DOM结构才能正常渲染弹窗。
修改grid.js中的getSiteId方法：

var getSiteId = function () {
    $.ajax({
        type: 'GET',
        url: "", // 填写你的后端接口地址
        dataType: 'json',
        success: function (idList) {
            // 拼接Modal完整结构 + 水平排列的ID列表
            let modalContent = `
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">ID列表</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" style="display: flex; gap: 12px; flex-wrap: wrap;">
            `
            // 遍历ID数组生成水平展示的元素
            idList.forEach(id => {
                modalContent += `<span class="badge bg-primary fs-6">${id}</span>`
            })
            modalContent += `
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
            `
            // 渲染DOM并触发弹窗显示
            $('#login_for_review').html(modalContent).modal('show');
            console.log(idList);
        }
    });
};

补充说明 #

• 上述代码用flex布局实现ID水平排列，支持自动换行，也可以根据需求调整样式
• 如果使用Bootstrap 3版本，只需调整对应的类名即可，核心逻辑不变
• 如果确认资源引入顺序正确仍报错，可排查页面是否存在重复引入jQuery的情况

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