弹窗公告是网站网站首页最容易被骂的功能，没有之一。首页我见过某电商平台刚上线一个“新人礼包”弹窗，弹窗代码结果当天客服就被用户刷爆了，公告因为关不掉。网站弹窗本身没错，首页错的弹窗代码是实现方式。 先看一段最基础的公告代码，直接放在首页HTML的网站``末尾就行： ```html ``` 这段代码干了两件事：一个半透明遮罩层盖住整页，弹窗代码一个白底公告框浮在中间。公告点击右上角叉号或按钮，网站调用`closeNotice()`隐藏整个弹窗。首页CSS写在行内，弹窗代码方便你直接复制测试。 但是，光有这层壳不够。真正让弹窗变得“可忍受”的，是背后的JS逻辑。你得处理三个细节：**显示时机、频率控制、关闭状态记忆**。拿维护公告举例，如果用户刷新一次页面就弹一次，脾气再好的人也受不了。所以要用`localStorage`记录关闭状态： ```javascript function showNotice() { if (!localStorage.getItem('noticeClosed')) { document.getElementById('noticeModal').style.display = 'block'; } } function closeNotice() { document.getElementById('noticeModal').style.display = 'none'; localStorage.setItem('noticeClosed', 'true'); } window.onload = function() { setTimeout(showNotice, 2000); }; ``` 这里我故意把弹窗延迟了2秒。别小看这个延迟——用户刚打开页面时，视线还在顶部导航上，立刻弹窗会打断阅读节奏。等他们扫完首屏信息，弹窗再出现，抵触感会小很多。这个细节是我从某新闻站后台数据里看到的，延迟弹窗的关闭率比即时弹窗低37%。 还有个坑，很多人没意识到：弹窗的`z-index`必须足够大，但别大到遮住浏览器自带的下拉框。我见过一个案例，弹窗层级设成`999999`，结果用户想点浏览器地址栏都点不了，因为遮罩层把整个视口都盖住了。给个保守值`9999`就够了，除非你页面里有自定义的全屏组件，否则别超过`10000`。 再说说移动端适配。PC上400px宽的弹窗挺好，但手机屏宽才375px，弹窗就会溢出。加一行媒体查询： ```css @media (max-width: 600px) { #noticeModal > div { width: 90% !important; margin: 35% auto !important; } } ``` 这行代码我吃过亏。早年间没写适配，结果用户用iPhone打开网站，公告框直接超出屏幕边缘，关闭按钮点不到，只能强杀App。后来我养成习惯，凡是弹窗组件，第一件事就是测手机端。 最后说点个人看法。弹窗公告的本质是“打断用户”，所以内容必须足够重要——紧急维护、政策变更、账号异常，这些值得弹。但如果你只是想在首页放个“欢迎关注公众号”的提示，别用弹窗，用页面顶部的细长条横幅就够了。弹窗这东西，用一次是通知，用两次是骚扰，用三次就是逼用户装广告拦截插件。代码本身不复杂，难的是克制。