网站弹窗公告源码

去年帮朋友改一个活动页，网站他非要在页面右下角加个弹窗，弹窗说是公告“用户一进来就能看到优惠”。我劝了半天，源码他不听，网站结果上线三天，弹窗跳出率涨了快两成。公告弹窗这东西，源码用好了是网站提醒，用不好就是弹窗赶人。但今天不聊该不该用，公告只聊怎么写——一份能直接跑的源码网站弹窗公告源码，到底长什么样。网站

先看最核心的弹窗HTML结构。别搞太复杂，公告一个遮罩层加一个内容框就够了。遮罩层负责压暗背景，内容框放公告文字和关闭按钮。有人喜欢用<dialog>标签，浏览器原生支持，省事。但兼容性你得自己测，尤其是一些老版本安卓机。我习惯用最土的div嵌套，稳。

<div id="notice-mask"> <div id="notice-box"> <p>今晚八点直播，抽奖送键盘。</p> <button id="notice-close">知道了</button> </div> </div>

CSS部分，遮罩层固定定位，铺满全屏，背景半透明黑。内容框居中，白底，圆角，加一点阴影。别用那种花里胡哨的动画，什么弹跳旋转，用户看多了只会烦。淡入就够了，0.3秒，不拖沓。

#notice-mask {  position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s; } #notice-mask.show {  opacity: 1; visibility: visible; } #notice-box {  background: #fff; padding: 24px 32px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); max-width: 320px; text-align: center; }

JS逻辑更简单。页面加载后延迟一秒显示，别一进来就糊脸。关闭按钮点击后隐藏，并且当天不再弹。这里用localStorage存个标记，比cookie清爽。代码就几行：

const mask = document.getElementById('notice-mask'); const closeBtn = document.getElementById('notice-close'); if (!localStorage.getItem('noticeShown')) {  setTimeout(() => {  mask.classList.add('show'); }, 1000); } closeBtn.addEventListener('click', () => {  mask.classList.remove('show'); localStorage.setItem('noticeShown', '1'); });

有个细节容易翻车：弹窗出现时，背后的页面还能滚动。用户滑一下，弹窗跟着跑，体验极差。解决办法是给body加个overflow:hidden。但关闭后记得还原，不然页面就锁死了。我见过有人忘了还原，用户关掉弹窗发现页面滚不动，直接关标签页走人。

再聊点实际的。公告内容别超过三行，字号至少16px，手机上看不清等于没写。关闭按钮要够大，别搞个灰色小叉，用户点半天点不中。还有，别用“确定”“取消”这种按钮，公告不需要用户做选择，一个“知道了”或者“关闭”就行。我甚至见过弹窗里放两个按钮，一个“立即购买”一个“残忍拒绝”，这种文案除了招骂没别的用。

最后说个变通方案。如果你不想自己写，又不想引第三方库，可以直接用<details>标签做个折叠公告，放在页面顶部。用户点开才看，不点不打扰。虽然不如弹窗显眼，但至少不惹人烦。源码就一行：

<details> <summary>公告：今晚八点直播</summary> <p>抽奖送键盘，点击进入直播间。</p> </details>

弹窗公告的源码本身不复杂，复杂的是你决定什么时候弹、弹给谁看。写代码之前，先想清楚这件事。不然再漂亮的弹窗，也只是个碍眼的方块。

本文地址：http://www.79wt.cn/news/1410b1899840.html