如何实现带时间进度指示器的Bootstrap自动隐藏模态框

核心思路 #

• 弃用jQuery的delay()方法：该方法仅能添加延迟执行队列，无法实时获取剩余时间更新进度条，改用setInterval定时器实现进度实时计算
• 进度计算逻辑：模态框打开时记录起始时间，每隔固定间隔计算已流逝时长占总时长的比例，反向推导剩余时间占比，更新进度条宽度
• 异常兼容：模态框被提前关闭时主动清除定时器，避免内存泄漏和重复执行问题，同时重置状态方便下次调用

完整替换后的控制脚本 #

$(document).on('shown.bs.modal', '.auto-hide-modal', function () {
    const $modal = $(this);
    const totalTime = $modal.data('time'); // 读取自定义的总展示时长，单位为毫秒
    const $progress = $modal.find('#time_indicator');
    const startTime = Date.now();
    // 初始化进度条为满格状态
    $progress.css('width', '100%');
    // 将定时器ID存储到模态框元素属性上，方便后续清理
    const closeTimer = setInterval(() => {
        const elapsed = Date.now() - startTime;
        // 计算剩余时间占比，最低为0避免出现负数
        const remainingPercent = Math.max(0, 100 - (elapsed / totalTime * 100));
        $progress.css('width', remainingPercent + '%');
        // 时长达标后执行关闭逻辑
        if (elapsed >= totalTime) {
            clearInterval(closeTimer);
            $modal.fadeOut(300, function () {
                $(this).modal('hide');
            });
        }
    }, 20); // 每20ms更新一次，兼顾流畅度和性能开销
    $modal.data('closeTimer', closeTimer);
});
// 监听模态框关闭事件，清理残留资源
$(document).on('hidden.bs.modal', '.auto-hide-modal', function () {
    clearInterval($(this).data('closeTimer'));
    // 重置进度条和元素样式，避免下次打开显示异常
    $(this).find('#time_indicator').css('width', '0');
    $(this).css('display', '');
});

可选优化 #

如果需要进度条有视觉提醒效果，可以在计算剩余比例时添加样式切换逻辑，比如剩余时间不足20%时切换为红色警示样式：

// 插入到remainingPercent计算完成后
if (remainingPercent < 20) {
    $progress.addClass('bg-danger');
} else {
    $progress.removeClass('bg-danger');
}

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