原生 window.confirm() 的不足与局限性
它会阻塞JavaScript主线程，导致页面完全卡死；无法自定义样式、添加图标或嵌入复杂HTML内容；在移动端浏览器中展示效果非常糟糕；最重要的是，它不支持异步等待用户操作——例如点击“确定”后需要先发送请求再关闭弹窗，confirm() 完全无法实现。简而言之，它只适用于最基础的确认场景，一旦涉及复杂交互，便显得力不从心。
使用 Promise 结合原生 DOM 实现可 await 的确认弹窗
核心设计思路非常清晰：将用户的点击操作封装为 Promise 对象，调用时只需使用 await showConfirm('删除后不可恢复？')，即可获取 true 或 false 结果，继续后续流程。
- 使用
div作为遮罩层，设置position: fixed; z-index: 9999防止点击穿透。 - 弹窗本身采用绝对定位居中，并添加
tabindex="-1"属性并手动聚焦，确保键盘可操作。 - 点击“确定”按钮时
resolve(true)，点击“取消”或按下Esc键时resolve(false)。 - 关键点：
resolve后必须调用remove()清理DOM元素，否则多次调用会导致弹窗堆积，最终页面崩溃。
下面给出核心逻辑的简化版本，去除了无关干扰，保留最干净的结构：
function showConfirm(message) {
return new Promise(resolve => {
const overlay = document.createElement('div');
overlay.innerHTML = `
${message}
`;
// 记得给遮罩层加上样式（position: fixed; z-index: 9999; 半透明背景等）
document.body.appendChild(overlay);
const btnConfirm = overlay.querySelector('[data-action="confirm"]');
const btnCancel = overlay.querySelector('[data-action="cancel"]');
const handleConfirm = () => { resolve(true); overlay.remove(); };
const handleCancel = () => { resolve(false); overlay.remove(); };
btnConfirm.addEventListener('click', handleConfirm);
btnCancel.addEventListener('click', handleCancel);
overlay.addEventListener('keydown', e => e.key === 'Escape' && handleCancel());
// 如果需要点击遮罩层外部关闭，可以监听 overlay 的 click 事件
});
}
这段代码虽然简洁，但足以应对绝大多数业务场景的需求。
showConfirm() 调用时需注意的兼容性问题
并非所有执行环境都支持在顶层直接使用 await。如果在非 async 函数中调用，浏览器会抛出 SyntaxError: await is only valid in async function 错误。
- 调用时必须包裹在
async函数中：async function handleClick() { const ok = await showConfirm(...); } - 在 Vue 或 React 框架中，注意不要在渲染函数中使用
await，否则会破坏响应式或触发警告。 - 旧版 Safari 对
Promise构造函数内的 DOM 操作存在微小延迟，极少数情况下可添加setTimeout(resolve, 0)解决。 - 如果项目使用了 Shadow DOM，弹窗必须追加到
document.body，而非组件的根节点，以免被隔离。
另一个容易被忽略的细节：点击遮罩层外部是否应关闭弹窗？这取决于设计策略。通常，不允许外部点击关闭更安全（防止误操作），如需支持，可监听遮罩层的 click 事件并调用 handleCancel。
是否应该使用第三方库？例如 dialog 元素或 AlertifyJS
元素语义良好，内置 showModal() 方法，但 IE 完全不支持，Safari 直到 15.4 才稳定支持 backdrop，且无法自定义按钮文案或嵌入复杂内容。如果只面向现代浏览器（Chrome、Firefox、Safari ≥16），可以尝试使用 ，但最好添加 fallback 检测（如 'showModal' in HTMLDialogElement.prototype）。
AlertifyJS 等老库依赖 jQuery，体积较大，API 设计过时，除非维护老旧项目，否则不推荐。
- 纯文本确认、逻辑简单 → 使用上述20行DOM逻辑自行实现，最稳定可控。
- 需要加载状态、多步骤、国际化 → 直接使用
react-modal或@headlessui/react等轻量可控的UI库。
真正困难的从来不是“如何弹出弹窗”，而是“用户点击确定后网络请求失败怎么办”——这部分才值得投入精力设计重试机制、防重复提交和错误反馈。
