如何使用jQuery在Bootstrap Modal无数据时显示模态框提示消息

代码无法实现预期效果有3个核心错误：

• 逻辑倒置：剩余卡片数为0时执行了关闭模态框的逻辑，和展示无数据提示的需求冲突
• 语法错误：else if() 未填写判断条件，属于无效语法，后续提示插入逻辑不会执行
• 选择器错误：提示内容的插入目标写的是.card-body，但最后一张卡片删除后页面已不存在该元素，提示无法正常渲染

无需改动原有HTML结构，替换底部脚本块即可，修复点如下：

• 删除卡片为空时关闭模态框的逻辑
• 移除无效的空条件判断，卡片删除后直接统计剩余带removeit类的任务卡片数量，数量为0时向modal-body插入居中的无数据提示
• 增加模态框关闭重置逻辑，避免下次打开模态框时内容异常
• 修复事件绑定失效问题，重置内容后按钮可正常点击

无刷新版本实现（推荐） #

不会触发页面刷新，体验更好：

$(document).ready(function(){
    // 缓存模态框初始内容，用于关闭后重置
    const modalBody = $('.modal-body');
    const defaultModalContent = modalBody.html();

    // 卡片按钮事件绑定函数
    function bindCardAction() {
        $('.clscurrent').off('click').on('click', function() {
            // 移除当前点击的卡片
            $(this).closest('.removeit').remove();
            // 统计剩余任务卡片数量
            const remainTasks = modalBody.find('.card.removeit').length;
            if (remainTasks === 0) {
                // 无任务时插入居中提示
                modalBody.html(`
                    <div class="d-flex align-items-center justify-content-center h-100 text-muted">
                        You don't have any task
                    </div>
                `);
            }
        });
    }

    // 模态框关闭时重置为初始内容，重新绑定事件
    $('#myModal').on('hidden.bs.modal', function() {
        modalBody.html(defaultModalContent);
        bindCardAction();
    });

    // 页面加载完成后首次绑定事件
    bindCardAction();
});

简单版本实现 #

代码量更少，关闭模态框时刷新页面恢复初始内容，适合快速验证效果：

$(document).ready(function(){
    $('.clscurrent').on('click', function() {
        $(this).closest('.removeit').remove();
        if($("#myModal").find('.card.removeit').length === 0){
            $(".modal-body").html(`
                <div class="d-flex align-items-center justify-content-center h-100 text-muted">
                    You don't have any task
                </div>
            `);
        }
    });
    $('#myModal').on('hidden.bs.modal', function () {
        location.reload();
    })
});

提示文案外层套的flex布局类是Bootstrap自带的工具类，不需要额外写CSS就能实现垂直水平居中，和你现有70vh高度的modal-body适配，显示效果更好。

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