| 在如今网站运营中，弹窗提醒已经作为重要信息传达的一种方式，既要吸引用户注意又不能过度干扰用户体验。这款弹窗单页就是一个不错的选择，它既实现了想要的功能又平衡了用户体验，当用户点击关闭按钮后，临时记录Cookie并在24小时内部再弹窗。 演示图
自适应设计：无缝适配多终端 该弹窗采用现代 CSS Flex 布局，通过媒体查询技术实现了全终端自适应： 在 PC 端（屏幕宽度 > 800px）保持舒展布局，文字行高 1.6 倍，按钮尺寸适中，确保信息清晰可读 在移动端（屏幕宽度≤800px）自动优化排版，调整字体大小与按钮尺寸，缩减行高与间距，避免内容溢出 界面美学：精致设计提升用户体验 弹窗采用了层次分明的视觉设计，营造出专业且友好的观感：
功能亮点：灵活可控的交互逻辑
收藏按钮自定义：只需修改代码中的 href 属性即可设置跳转链接，例如：
点击 "关闭" 按钮：设置 24 小时 Cookie，期间不再显示弹窗 点击弹窗外部区域：仅隐藏弹窗，刷新页面后重新显示 首次访问或 Cookie 过期时自动显示
使用 class 封装功能，通过 WeakMap 存储私有状态避免全局污染 采用事件委托与冒泡控制，确保交互逻辑清晰可靠 兼容 DOMContentLoaded 事件，保证在页面加载完成后执行 部署说明 使用时只需： 删除代码顶部的注释说明 在A标签中填入实际的防失联跳转网址 将完整代码插入到需要显示弹窗的页面中 该组件无需额外依赖，原生 JavaScript 实现确保了良好的兼容性，无论是 PC 端论坛还是移动端访问，都能提供一致且优质的用户体验。 |
QQ登录 / 注册
站长笔记
2025-8-27 10:07
166浏览
皖ICP备2021010202号
赣公网安备36112102000145号