必须放弃alert()改用DOM+CSS+JS实现顶部弹出：用position:fixed+top:1rem+left:50%+transform定位，opacity/visibility控制显隐，JS防堆叠、自动销毁、XSS防护及无障碍适配。
用 alert() 实现不了顶部弹出效果
浏览器原生的 alert() 没有位置控制能力，它由系统级 UI 渲染，强制居中、不可样式化、不支持动画，更不可能“顶部弹出”。强行在顶部调用 alert() 只会得到一个居中阻塞弹窗，且在 iOS Safari 或部分安卓 WebView 中可能被静默拦截或延迟触发。
常见错误现象包括：以为加了 top: 0 CSS 就能影响 alert()；在 fetch 回调里调用却因作用域丢失报 ReferenceError: alert is not defined；连续点击按钮导致多个 alert() 堆叠（实际是被浏览器合并或忽略）。
结论很明确：需要顶部弹出，就必须放弃 alert()，改用 DOM + CSS + JS 自主控制。
用 position: fixed + transform 实现真·顶部定位
核心是让弹窗容器脱离文档流，并精准锚定在视口顶部区域。关键不是靠 top: 0 硬推，而是结合 transform 避免渲染抖动：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
position: fixed是必须的，否则滚动时弹窗会随页面移动 - 用
top: 1rem（而非0）留出状态栏/地址栏安全距离，避免被截断 - 水平居中推荐
left: 50%; transform: translateX(-50%)，比margin: 0 auto更可靠 - 不要用
display: none控制显隐——它会中断动画；改用opacity: 0+visibility: hidden配合transition
示例关键 CSS：
`.toast {
position: fixed;
top: 1rem;
left: 50%;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 1000;
}
.toast.show {
opacity: 1;
visibility: visible;
}`
防堆叠与自动销毁的 JS 控制逻辑
用户连续点击按钮时，若不清理前一个弹窗，DOM 节点会不断累积，造成内存泄漏和视觉混乱。必须保证同一时间最多只存在一个 toast：
- 每次调用
showNotice()前，先检查并移除已存在的.toast节点 - 用
setTimeout自动隐藏，但别直接remove()——应先移除show类触发动画退出，再监听transitionend后清理节点 - 关闭按钮需绑定
click，同时监听Escape键，但仅当弹窗是当前唯一焦点元素时才响应（避免干扰表单输入） - 消息内容务必用
textContent设置，禁用innerHTML——防止 XSS 注入（尤其当消息来自接口或 URL 参数）
简短逻辑示意：
function showNotice(msg) {
const existing = document.querySelector('.toast');
if (existing) existing.remove();
const toast = document.createElement('div');
toast.className = 'toast';
toast.textContent = msg; // 不用 innerHTML！
document.body.appendChild(toast);
setTimeout(() => toast.classList.add('show'), 10);
setTimeout(() => {
toast.classList.remove('show');
toast.addEventListener('transitionend', () => toast.remove(), { once: true });
}, 3000);
}
移动端适配与可访问性绕不开的细节
顶部弹窗在小屏上极易被系统状态栏、刘海屏或虚拟导航键遮挡，同时屏幕阅读器无法感知纯视觉提示。这两个问题常被忽略，但上线后立刻暴露：
- 给
.toast加aria-live="polite"和role="status"，让屏幕阅读器自动朗读内容 - 避免用
vh单位做高度限制（iOS Safari 对100vh解析异常），改用max-height: 80vh+overflow: hidden - 触摸设备上，遮罩层（如有）必须设
touch-action: none，否则滑动会误触发页面滚动 - 如果弹窗含操作按钮（如“重试”），需手动管理焦点：显示后
focus()到第一个可交互元素，关闭后恢复到触发按钮
最易被跳过的点：没给弹窗加 z-index 显式值，结果被第三方广告脚本或统计 SDK 的浮层盖住——建议从 1000 起步，根据项目实际调整。
