别用 window.alert()，应手写 dom 弹窗或选轻量库；核心是遮罩层、弹窗容器、关闭逻辑；需控制显隐、不阻塞 js、适配移动端；注意响应式、字体、动画细节及真机测试。
弹窗公告用 window.alert() ？别用，它不可定制
原生 alert() 看似简单，但无法改样式、不能加按钮文字、阻塞主线程、不支持点击穿透控制——实际项目里基本等于废。真要“精美”，必须手写 DOM 弹窗或用轻量库。
用纯 HTML/CSS/JS 实现可复用的公告弹窗
核心是三块：遮罩层（#overlay）、弹窗容器（#notice-modal）、关闭逻辑。关键不是“多炫”，而是「能控制显隐」「不干扰后续 JS 执行」「适配移动端」。
- 遮罩层用
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9998;，注意z-index要低于弹窗但高于页面内容 - 弹窗本身设
position: fixed; z-index: 9999;，并用transform: translate(-50%, -50%)居中（比top: 50%; left: 50%更稳） - 关闭按钮绑定
click事件，触发时移除遮罩和弹窗的display: none或切换class，别用remove()——否则下次得重新innerHTML注入 - 务必监听
Escape键：document.addEventListener('keydown', e => e.key === 'Escape' && hideModal())
避免常见布局崩坏：宽度、字体、动画细节
公告弹窗最常翻车在响应式断点和字体渲染上。不是所有设备都支持 rem 或 vh，别一上来就写 width: 90vw。
- 最大宽度设
max-width: 480px，移动端撑满用width: 90%，PC端固定再居中 - 字体大小用
16px起步，禁用em（父元素缩放会连锁影响），优先用px或rem（配合根字体设置） - 动画用
opacity+transform，别用display切换——后者无法过渡；CSS 中写transition: opacity 0.2s ease, transform 0.2s ease; - 关闭按钮
×建议用 SVG 或伪元素，避免 Unicode 渲染差异；位置固定在右上角，top: 12px; right: 16px;
要不要用第三方库？看这三点再决定
如果项目已用 Vue 或 React，直接封装成组件更稳妥；若只是静态页或老系统，引入 iziToast 或 noty 反而增加首屏压力。
- 轻量级需求（单次公告、无队列）：手写 50 行 JS + 30 行 CSS 完全够用，加载零延迟
- 需要队列、进度条、多主题：选
noty（noty.min.js仅 12KB），但注意它默认依赖jQuery - Vue 项目别硬套原生弹窗，用
v-model控制show，内部用teleport挂载到body，否则z-index易被 scoped style 截断
真正难的不是做出弹窗，是让它在不同浏览器里保持圆角一致、阴影不糊、文字不抖——这些细节没试过 iOS Safari 和 Android Chrome 真机，就别急着上线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
