最简弹窗用 alert()，但仅限开发调试；生产环境应手写 DOM 弹窗，结合 CSS 动画与可配置函数封装，注意状态管理、无障碍支持及兼容性。
用 alert() 实现最简弹窗，但别在生产环境用
直接调用 alert("消息内容") 就能触发浏览器原生弹窗，它会阻塞后续 JS 执行、暂停页面交互，适合调试或强制确认场景。但用户无法自定义样式、不能插入 HTML、不支持点击按钮回调，现代网页基本弃用。
常见错误现象：alert() 在移动端常被拦截；连续调用多次会被合并或忽略；放在异步回调里（比如 fetch.then()）可能因作用域丢失而报错 ReferenceError: alert is not defined（极少见，多见于沙箱环境）。
- 只用于开发阶段快速验证逻辑流程
- 避免在循环中调用，防止卡死浏览器
- 不要依赖它的返回值做业务判断（它只返回
undefined）
用 document.createElement + appendChild 手写轻量弹窗
不引入框架的前提下，自己创建 DOM 节点是最可控的方式。核心是动态生成一个带遮罩层（div.overlay）和内容区（div.toast）的结构，再用 CSS 控制显示/隐藏和动效。
关键注意点：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层必须设
position: fixed和z-index高于页面其他元素 - 弹窗内容区建议用
transform: translate(-50%, -50%)居中，比top: 50%; left: 50%更平滑 - 关闭按钮要绑定
removeChild或classList.remove("show")，别漏掉清理事件监听器 - 记得在
body上临时加overflow: hidden防止滚动穿透（仅对模态框必要）
示例片段：
function showNotice(msg) {
const overlay = document.createElement("div");
overlay.className = "overlay";
overlay.innerHTML = `
<div class="toast">
<span class="msg">${msg}</span>
<button class="close">×</button>
</div>
`;
document.body.appendChild(overlay);
overlay.querySelector(".close").onclick = () => document.body.removeChild(overlay);
}
用 CSS @keyframes 加入场/退场动画
纯 JS 显示隐藏太生硬，加个淡入+缩放效果能显著提升体验。重点不是写多复杂的动画，而是控制好触发时机：先加类让元素进入文档流，再加 show 类触发动画；关闭时用 animationend 事件监听动画结束再移除节点。
容易踩的坑：
-
opacity: 0和visibility: hidden必须配合使用，否则动画过程中元素仍占布局空间 - 不要给
display: none的元素加动画——它不会触发 - 移动端需加
-webkit-animation兼容旧版 Safari - 动画时长建议 ≤ 300ms，超过会让用户感觉延迟
对应 CSS 示例：
@keyframes toastIn {
from { opacity: 0; transform: scale(.8); }
to { opacity: 1; transform: scale(1); }
}
.toast.show { animation: toastIn .2s ease-out; }
封装成可复用函数：支持类型、超时、回调
实际项目里，你不会每次弹通知都重写一遍 DOM 操作。把常用配置抽成参数，比如 type: "success" | "error" | "info" 控制图标和颜色，duration: 3000 自动关闭，onClose 提供清理钩子。
性能与兼容性提醒：
- 避免每次调用都新建
style标签，CSS 提前写好或注入一次即可 - IE11 不支持
Element.prototype.remove()，要用parentNode.removeChild(el) - 如果页面已有多个弹窗需求，务必加队列机制，防止后弹的盖住前一个还没消失的
- 对屏幕阅读器友好：弹出时设
aria-live="polite"，关闭时清除tabindex和焦点
这类封装的复杂点不在 DOM 操作本身，而在状态管理——比如用户手动关闭了弹窗，但定时器还在跑，就可能触发已销毁节点的属性访问错误。所以每个实例最好自带清理函数，而不是靠全局变量硬控。
