alert()仅适用于临时调试、内网工具等非正式场景，因其阻塞脚本、无法定制、移动端体验差；推荐用toast或dialog替代，兼顾轻量与健壮性。
alert() 是最轻量的弹窗方案，但仅限调试或临时验证；正式环境里它阻塞脚本、无法定制、移动端体验差，不能当真实交互组件用。
什么时候该直接用 alert()
只在以下场景考虑：
• 临时调试 JS 流程，比如验证按钮是否触发了事件
• 后端返回错误后快速提示（如 alert("网络异常")），且不关心后续逻辑是否继续执行
• 内网工具页、无样式要求的运维后台
- 传入非字符串（如
undefined、{}）会被自动转成[object Object]，调试时看不出原始结构 - 调用后整个页面冻结，
fetch、setTimeout、表单提交都会卡住，用户必须点“确定”才能恢复 - 移动端 Safari/Chrome 会把弹窗缩得很小，还可能遮挡软键盘，输入类操作完全不可用
想轻量又可用？封装一个 toast 提示函数
比 alert() 多写 10 行 JS，就能解决样式、自动关闭、防重复叠加问题。核心是动态创建 div + 定时移除：
function toast(msg) {
if (document.querySelector('.toast')) return;
const el = document.createElement('div');
el.className = 'toast';
el.textContent = msg;
el.style.cssText = `
position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
background: #333; color: white; padding: 8px 16px; border-radius: 4px;
z-index: 9999; font-size: 14px;
`;
document.body.appendChild(el);
setTimeout(() => el.remove(), 2000);
}
- 不依赖任何库，兼容 IE11+ 和所有现代浏览器
- 自动防堆叠：检测已有
.toast就跳过，避免连点多次弹出多个 - 位置固定在顶部居中，不影响页面滚动，也不遮挡操作区域
- 若需支持图标或 HTML 内容，把
el.textContent换成el.innerHTML即可
dialog 元素不是“更重”，而是“少写 JS”
Chrome 97+/Firefox 99+/Safari 15.4+ 已原生支持 <dialog>，它语义正确、自带焦点锁、ESC 关闭、backdrop 点击关闭——这些你手写 modal 得额外处理的逻辑，它全内置。
立即学习“前端免费学习笔记（深入）”；
- 必须是
<body>的直接子元素，否则showModal()不渲染 backdrop - 不能用
display: block强行显示，必须调用dialogEl.showModal() - 关闭请用
dialogEl.close()，别用remove()，否则再调showModal()会报错Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document. - Safari 15.3 及更早版本不支持
dialog::backdrop自定义颜色，只能设background-color: rgba(0,0,0,.5)或靠 JS 补一层 overlay
手写 modal 时最容易漏掉的三件事
哪怕只是做个登录框，不处理这三点，用户就会觉得“卡”“点不着”“关不掉”：
-
背景滚动没锁死：打开弹窗后用户还能滚页面，导致内容偏移。正确做法是记录
document.body.scrollTop，设body { position: fixed; top: -scrollTop }；关闭时还原 -
焦点没锁住：按 Tab 键能切到弹窗外的按钮。打开后要
modal.querySelector('input, button')?.focus()，并监听keydown拦截 Tab 键循环范围 -
ESC 关闭干扰输入：如果弹窗里有搜索框，按 ESC 应清空输入而非关闭弹窗。监听
keydown时得判断event.target是否为可编辑元素（input、textarea、contenteditable）
真正轻量的弹窗，不在于代码行数少，而在于边界情况处理得干净——比如用户连点五次按钮，弹窗只出现一次；比如在输入框里按 ESC，光标不会意外跳走；比如弹窗关掉后，页面滚动位置和焦点状态都回到打开前的样子。
