JavaScript如何实现Bootstrap模态框进度运行时不可关闭

所有方案均基于Bootstrap模态框原生特性实现，不会和框架原有逻辑产生冲突，按适配优先级排序如下：

• 方案1：通过原生配置项禁用关闭触发渠道（最推荐）
  Bootstrap模态框原生提供了关闭行为的控制参数，不需要额外写自定义拦截逻辑，兼容性最好。
  模态框默认的关闭渠道有三个：点击遮罩层、按ESC键、点击模态框内带data-dismiss="modal"的关闭按钮，分别对应控制即可：

// 进度开始时执行
const $targetModal = $('#yourModalId');
// 配置点击遮罩不关闭、ESC键不关闭
$targetModal.modal({
  backdrop: 'static',
  keyboard: false
});
// 禁用所有关闭类按钮
$targetModal.find('.close, [data-dismiss="modal"]')
  .prop('disabled', true)
  .addClass('disabled');

// 进度结束/终止后恢复配置
const modalIns = $targetModal.data('bs.modal');
modalIns.options.backdrop = true;
modalIns.options.keyboard = true;
$targetModal.find('.close, [data-dismiss="modal"]')
  .prop('disabled', false)
  .removeClass('disabled');

其中backdrop: 'static'是框架原生支持的配置项，不会破坏模态框的层级、事件绑定逻辑。

• 方案2：通过hide.bs.modal前置事件拦截关闭行为（逻辑最集中）
  如果模态框已经提前初始化完成，不想反复修改配置，可以通过模态框关闭前触发的原生事件做拦截，只需要维护一个进度状态标记即可：

// 进度状态标记，默认未运行
let isProcessing = false;
const $targetModal = $('#yourModalId');

// 绑定模态框关闭前的拦截事件
$targetModal.on('hide.bs.modal', function(e) {
  if (isProcessing) {
    e.preventDefault(); // 直接阻止关闭行为
    // 可选增加友好提示
    $(this).find('.status-tip').text('处理中，请稍候...').stop().fadeIn().delay(1200).fadeOut();
  }
});

// 进度启动时修改标记
function runProgress() {
  isProcessing = true;
  // 这里写你的进度逻辑：比如文件上传、接口请求、长耗时计算
}

// 进度结束后重置标记
function progressDone() {
  isProcessing = false;
  // 后续逻辑，比如提示成功、允许手动关闭
}

这个方案的优势是不需要改动模态框的原有配置，所有拦截逻辑统一管控，后续维护成本低。

• 方案3：临时移除关闭触发绑定（特殊场景备用）
  如果需要针对特定场景做更细粒度的控制，可以临时移除关闭触发源的绑定，等进度结束后恢复，注意要提前缓存原有属性避免功能异常：

const $targetModal = $('#yourModalId');
const $closeTriggers = $targetModal.find('[data-dismiss="modal"]');
const modalIns = $targetModal.data('bs.modal');

// 进度启动时
$closeTriggers.each(function() {
  $(this).data('originDismiss', $(this).attr('data-dismiss')).removeAttr('data-dismiss');
});
modalIns._config.backdrop = 'static';
modalIns._config.keyboard = false;

// 进度结束后恢复
$closeTriggers.each(function() {
  $(this).attr('data-dismiss', $(this).data('originDismiss'));
});
modalIns._config.backdrop = true;
modalIns._config.keyboard = true;

避坑提示：不要自己额外加透明遮罩层盖在模态框上实现禁止关闭，这种方案很容易打乱Bootstrap内置的z-index层级规则，引发点击穿透、弹窗层级错乱的问题，优先选择前两种基于框架原生能力的实现方案。

内容的提问来源于stack exchange，提问作者Irgi Ahmad Maulana