本文详解如何通过 onhidden 回调监听模态框关闭时机，在 Bootstrap3-Dialog 中可靠更新外部作用域变量（如 error），避免因异步执行导致的变量未同步问题。

本文详解如何通过 `onhidden` 回调监听模态框关闭时机，在 bootstrap3-dialog 中可靠更新外部作用域变量（如 `error`），避免因异步执行导致的变量未同步问题。

在使用 Bootstrap3-Dialog 时，一个常见误区是：直接在 show() 调用后立即读取变量值，期望它已被按钮回调修改。但模态框是异步弹出的，BootstrapDialog.show() 立即返回，而按钮点击逻辑发生在用户交互之后——因此紧随其后的 console.log(error) 总是输出初始值（如 false），而非按钮操作后的新值。

✅ 正确做法是：将依赖变量状态的逻辑，移至模态框生命周期事件中，尤其是 onhidden（模态框完全关闭并从 DOM 移除后触发），确保变量已由用户操作更新完毕。

以下为优化后的完整示例：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

let error = false;

if (!error) {
  BootstrapDialog.show({
    title: 'Attention',
    message: 'There was an error',
    // data 属性仅用于向 dialog 内部传递只读上下文，不自动绑定或响应式更新外部变量
    data: { error: error },
    onhidden: function(dialogItself) {
      // ✅ 此处 error 已被按钮 action 修改，可安全使用
      console.log('Modal closed. Final error state:', error);
      // 示例：根据 error 值执行后续流程
      if (error) {
        console.log('User chose to abort — handling error...');
      } else {
        console.log('User chose to continue — resuming workflow.');
      }
    },
    buttons: [
      {
        label: 'Close',
        action: function(dialogItself) {
          error = true; // 更新外部变量
          dialogItself.close();
        }
      },
      {
        label: 'Keep going',
        cssClass: 'btn-success',
        action: function(dialogItself) {
          error = false; // 显式保持/重置状态
          dialogItself.close();
        }
      }
    ]
  });
}

// ⚠️ 错误写法：此处 error 仍为 false（同步执行，早于用户点击）
// console.log(error); // 不要放在这里！

? 关键注意事项：

• data 选项仅用于向对话框内部传参（如自定义模板渲染），不会双向绑定或自动同步外部变量；所有状态变更必须显式赋值。
• 避免在 show() 后同步访问变量——务必使用 onshown（弹出后）、onhide（开始关闭前）或 onhidden（完全关闭后）等事件钩子。
• 推荐使用 let/const 替代 var 声明变量，防止意外提升或全局污染。
• 若需更复杂的状态管理（如多个模态框嵌套、Promise 链式调用），可封装为返回 Promise 的函数，内部 resolve(error) 实现异步等待。

通过合理利用 onhidden 事件，你就能精准捕获用户决策结果，让模态框真正成为可控的交互枢纽。