无阻断警告对话框是用div+CSS+JS模拟的非阻塞式提示框，弹出时脚本继续执行、页面仍可交互；需手动实现遮罩层、焦点管理、ESC关闭及无障碍支持（如aria-modal、焦点还原），无法用原生alert()或替代。
什么是“无阻断警告对话框”
浏览器原生的 alert() 是阻断式：弹出后 JS 会暂停执行，用户必须点确定才能继续。所谓“无阻断”，是指弹窗出现时脚本仍可运行、页面仍可交互（比如继续滚动、点击其他按钮），同时保持视觉上类似警告的提示效果。
这无法用 alert()、confirm() 或 prompt() 实现——它们全是同步阻断 API，且不可样式化、不可取消阻断行为。
用 div + CSS + JS 模拟警告框的最小可行方案
核心思路是手动创建 DOM 元素，控制显隐和层级，不依赖任何第三方库。
- 用一个带
position: fixed的div作遮罩层（z-index: 9999），防止底层点击 - 内部嵌套一个居中卡片，包含标题、消息体、确认按钮（可选取消）
- 点击按钮后移除整个 DOM 节点，或设
display: none复用 - 务必监听
Escape键关闭，否则体验断裂
示例片段：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
function showWarning(message, onConfirm) {
const overlay = document.createElement('div');
overlay.style.cssText = `
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.5); z-index: 9999; display: flex;
justify-content: center; align-items: center;
`;
const box = document.createElement('div');
box.innerHTML = `
<h3>警告</h3>
<p>${message}</p>
<button id="warning-ok">确定</button>
`;
box.style.cssText = `
background: white; padding: 20px; border-radius: 4px;
text-align: center; max-width: 400px; width: 90%;
`;
overlay.appendChild(box);
document.body.appendChild(overlay);
const btn = box.querySelector('#warning-ok');
btn.onclick = () => {
document.body.removeChild(overlay);
if (typeof onConfirm === 'function') onConfirm();
};
// ESC 关闭
const escHandler = e => e.key === 'Escape' && document.body.removeChild(overlay);
document.addEventListener('keydown', escHandler);
btn.onblur = () => document.removeEventListener('keydown', escHandler);
}
为什么不能用 dialog 元素直接替代
<dialog></dialog> 是 HTML 原生模态组件，但调用 showModal() 仍是阻断式（等同于 alert() 行为），且在 Safari 中支持不完整（直到 v15.4 才支持 showModal()，旧版仅 show() 非模态）。
若强行用 show() 配合手动遮罩，就回到了上一节的手动方案；而用 showModal() 则失去“无阻断”特性。所以实际项目中，<dialog></dialog> 并不解决本问题。
- Chrome/Edge 支持
showModal()，但阻断 JS 执行 - Safari 旧版本不支持
showModal()，降级后无遮罩、无焦点捕获 - 所有浏览器中，
<dialog></dialog>的样式穿透和键盘焦点管理仍需额外处理
容易被忽略的细节：焦点管理与可访问性
无阻断 ≠ 不管用户操作。如果弹窗出现后，用户按 Tab 键仍能切到背后按钮，或屏幕阅读器读不到警告内容，就等于没真正“提示”。
- 弹出时需用
box.focus()或btn.focus()把焦点移到弹窗内 - 要拦截 Tab 键循环：按下 Tab 时检测是否在弹窗内最后一个/第一个可聚焦元素，手动跳转
- 给遮罩层加
aria-hidden="true"，给弹窗加role="alertdialog"和aria-modal="true" - 关闭后必须把焦点还原到触发弹窗的元素（否则键盘用户会迷失）
这些不是“锦上添花”，而是让弹窗真正可用的底线。省略它们，看似快了两行代码，实则埋下 WCAG 不合规和移动端失焦的坑。
