Alert-JS

一、原生弹窗的"高级"用法与技巧

原生 alert/confirm/prompt 本身功能有限，但有一些进阶用法和边界技巧：

返回值驱动流程控制：confirm 返回布尔值、prompt 返回字符串或 null，可用于条件分支、循环确认、批量操作前二次确认。

封装成 Promise：把同步阻塞的原生弹窗包装成异步接口，统一调用风格。

javascript
const asyncConfirm = (msg) => Promise.resolve(confirm(msg));
输入校验与重试：prompt 返回后校验，不合法则循环重新弹出。

防重复弹窗：用标志位防止循环或事件重复触发导致弹窗轰炸。

用户手势要求：浏览器要求弹窗在用户交互（点击等）后触发，否则可能被拦截；需在事件回调中调用。

iframe 与跨域限制：iframe 中的弹窗可能被限制或需要 allow-modals 权限。

beforeunload 提示：离开页面时触发浏览器确认，但文案不可自定义，且需用户交互后才生效。

window.open 高级参数：控制窗口尺寸、位置、是否带工具栏，但受弹窗拦截器限制。

这些"高级用法"本质是在原生弹窗的限制内做封装和流程控制，样式、富内容、非阻塞仍做不到。

二、原生弹窗做不到、需要自定义弹窗的高级功能

生产环境的高级弹窗能力，通常用 <dialog> 元素或 UI 框架组件实现：

富内容渲染：弹窗内嵌 HTML、表单、表格、图片、图表、iframe、富文本，原生弹窗只能显示纯文本。

完全自定义样式：主题、动画、圆角、阴影、品牌风格，与产品 UI 一致。

自定义按钮与多按钮：不止"确定/取消"，可加"稍后""不再提示""去设置"等多选项，返回不同结果。

非阻塞与异步：Toast、Message、Notification 不阻塞主线程，自动消失，支持队列和堆叠。

模态与非模态切换：<dialog>.showModal() 模态、.show() 非模态；支持遮罩层点击关闭、ESC 关闭配置。

焦点管理与无障碍：焦点锁定在弹窗内、aria-modal、键盘导航、屏幕阅读器支持。

嵌套与层级管理：多弹窗叠加、z-index 管理、打开关闭栈。

拖拽、缩放、最小化：可拖动位置、调整大小、最小化到角落。

表单集成与校验：弹窗内表单提交、异步校验、loading 状态、错误提示。

Promise 化与链式调用：await dialog.confirm() 形式，支持 then/catch，便于流程编排。

动画与过渡：淡入淡出、缩放、滑动，提升体验。

全局 API 调用：Message.success()、Modal.confirm() 等命令式调用，无需手动管理 DOM。

国际化与动态内容：多语言文案、动态插槽、组件化内容。

权限与审计：敏感操作弹窗留痕、二次认证（如输入密码/验证码）。

移动端适配：底部弹出、手势关闭、安全区适配。

三、现代标准方案：<dialog> 元素的高级能力

javascript
const dlg = document.querySelector("dialog");
dlg.showModal(); // 模态，带遮罩、焦点锁定、ESC 关闭
dlg.show(); // 非模态
dlg.close("returnValue"); // 关闭并返回值
dlg.addEventListener("close", () => console.log(dlg.returnValue));
高级点：原生模态语义、焦点陷阱、::backdrop 遮罩样式、returnValue 返回值、cancel 事件拦截 ESC、无障碍支持。可在此基础上封装 Promise 化和组件化。

四、UI 框架的高级弹窗能力（生产常用）

以 Element Plus、Ant Design 等为例：

命令式调用：ElMessageBox.confirm()、Modal.confirm() 返回 Promise。

多种形态：Modal 模态框、Drawer 抽屉、Popconfirm 气泡确认、Message/Toast 轻提示、Notification 通知、Popover 弹出层。

插槽与组件内容：弹窗内可放任意组件。

异步关闭：beforeClose 钩子控制关闭前校验。

全局配置与主题：统一配置、暗色模式。

拖拽与全屏：部分组件支持。

五、对比：原生 vs 高级自定义

能力 原生 alert/confirm/prompt <dialog>/UI 组件
样式定制 否 是
富内容 否 是
多按钮 否 是
非阻塞/Toast 否 是
Promise 化 需封装 原生支持
焦点与无障碍 浏览器默认 可精细控制
动画 否 是
嵌套层级 差 可管理
移动端适配 差 可适配
六、注意事项与风险

原生弹窗仍受浏览器拦截：非用户手势触发可能被静默忽略，不能依赖它做关键流程的唯一提示。

阻塞主线程：原生弹窗会暂停脚本，循环调用体验极差。

prompt 安全性：返回值需判空和校验，不能直接拼接进 HTML（XSS 风险）。

自定义弹窗需处理焦点与无障碍：否则键盘用户和屏幕阅读器体验差，<dialog> 在这方面有原生优势。

层级与滚动锁定：多弹窗叠加时需管理 z-index 和 body 滚动锁定。

移动端差异：原生弹窗在移动端样式和拦截行为差异大，生产环境几乎都用自定义组件。

不要滥用弹窗：高频打断会伤害体验，能用内联提示/Toast 就不用模态弹窗。