应使用原生html+css+js实现轻量可访问弹窗，禁用alert()（阻塞页面、样式不可控）和notification api（http下静默失败）；需语义化结构（role="dialog"等）、可控显示时机、带版本号的时间戳localstorage持久化及严格焦点管理。
直接在 index.html 里加一个轻量、可访问、带防重复逻辑的 DOM 弹窗即可，不用框架，也不用 alert() 或 Notification API（后者在 HTTP 环境下必然失败）。
为什么不能用 alert() 或 Notification.requestPermission()
前者会阻塞页面、无法自定义样式、移动端常被拦截；后者在非 HTTPS / 非 localhost 环境下调用 Notification.requestPermission() 会静默失败——你连授权弹窗都看不到，控制台也没报错。当前时间是 2026 年 9 月，主流浏览器（Chrome、Edge、Safari 15.4+）对此策略执行得更严格。
-
alert()只适合开发时快速验证流程，比如临时插一句alert("here") -
Notification必须由用户点击触发，且只能在安全上下文运行；双击打开本地 HTML 文件？直接失效 - 别在
里写弹窗 JS，document.getElementById会找不到元素
怎么用原生 HTML + CSS + JS 实现首页公告弹窗
核心是三件事：结构语义化、显示时机可控、状态持久化。推荐把 JS 放在 前，或监听 DOMContentLoaded。
- HTML 结构必须含
aria-hidden="true"（初始隐藏）、role="dialog"（告知辅助技术）、tabindex="-1"（让focus()可控定位到弹窗） - CSS 遮罩层用
position: fixed; z-index: 99999;，内容区用transform: translate(-50%, -50%)居中，比top: 50%; left: 50%更平滑 - JS 显示时同步设
aria-hidden="false"，关闭时设回"true"，并移除body上的overflow: hidden（防滚动穿透） - 关闭方式要支持：按钮点击、
Esc键、点击遮罩层（注意判断e.target === dialog，别用stopPropagation()）
如何防止“今日不再提示”逻辑出错
只存个 localStorage.setItem('notice_shown', 'true') 是不够的。域名隔离、无过期、跨设备不一致，都会导致用户反复看到旧公告。
- 键名建议带版本号，例如
notice_v3_shown和notice_v3_ts，升级公告后旧键自动失效 - 存时间戳：
localStorage.setItem('notice_v3_ts', Date.now())，每次检查是否超 24 小时（不是“当天”，是“距上次显示满 24h”） - 不要依赖
localStorage做强一致性控制——它可能被用户清空，或在隐私模式下不可用，兜底逻辑仍是“显示一次” - 别用
cookie替代，它要发请求、有大小限制、还得处理同源策略
最易被忽略的是焦点管理：弹窗显示后，必须 modalContent.focus()；关闭后，焦点要回到触发按钮或 document.body，否则键盘用户会卡在空白处。这不是“锦上添花”，而是可访问性的硬性要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
