海洋 CMS 网站公告弹窗如何添加设置

海洋 CMS 加网站公告弹窗，最可靠的做法是不依赖后台插件、直接在模板的公共底部文件里贴一段 HTML+CSS+JS，用 localStorage 控制"只弹一次"；后台如果有公告管理菜单，那就只在后台改文字，代码一次写好不用再动。

海洋 CMS 的公告弹窗有哪两种加法？

结论：分"后台公告"和"模板手写弹窗"两条路，前者管内容、后者管展示，能结合就结合。

第一种是看后台有没有公告功能。登录后台后，在左侧菜单里找带"公告"字样的项（不同版本菜单名可能是"网站公告""公告管理""系统公告"，位置通常在"系统"或"内容"分组下）。海洋 CMS 各版本后台菜单结构有差异，v9.x 和 v10.x 就不完全一样，找不到这一项说明你的版本没内置公告模块，直接走第二种。

第二种是改模板。公告弹窗本质就是一段前端代码，跟 CMS 关系不大：弹窗是"谁弹"不重要，页面加载时执行一次 JS 就够了。

弹窗代码具体加在哪个文件？

结论：加在模板目录下被所有页面引用的公共底部文件里，一般是 /templets/你的模板名/foot.html，这样首页、列表页、内容页全站生效。

操作步骤：把模板目录下载到本地或直接用后台的"模板管理"，打开 foot.html，在 </body> 标签前面粘贴下面这段，保存后到后台清一次缓存：

<!-- 海洋CMS 公告弹窗 开始 -->
<div id="seaNotice" style="display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:420px;max-width:90%;background:#fff;border-radius:8px;box-shadow:0 6px 30px rgba(0,0,0,.25);z-index:99999;padding:20px;">
  <h3 style="margin:0 0 10px;font-size:18px;color:#222;">网站公告</h3>
  <div style="line-height:1.8;color:#444;font-size:14px;max-height:50vh;overflow:auto;">
    这里写公告内容，支持换行和链接。
  </div>
  <a href="javascript:;" onclick="seaNoticeClose()" style="display:block;margin-top:14px;text-align:center;background:#ff5c00;color:#fff;padding:9px 0;border-radius:4px;text-decoration:none;">我知道了</a>
</div>
<script>
(function(){
  if(localStorage.getItem('sea_notice_v1')==='1'){return;}
  var box=document.getElementById('seaNotice');
  if(box){box.style.display='block';}
})();
function seaNoticeClose(){
  document.getElementById('seaNotice').style.display='none';
  localStorage.setItem('sea_notice_v1','1');
}
</script>
<!-- 海洋CMS 公告弹窗 结束 -->

注意三个参数：z-index:99999 要高于你模板里播放器、导航栏的层级，否则会被盖住；max-width:90% 是给手机端留边距，不加手机上会横向溢出；max-height:50vh; overflow:auto 是防止公告文字过长把弹窗顶出屏幕。

怎么让弹窗只弹一次、换内容后重新弹？

结论：靠 localStorage 的键名版本号控制——关闭时写入 sea_notice_v1，把代码里的 v1 改成 v2，全站所有访客会重新看到一次新公告。

逻辑是：页面加载先读 localStorage，值等于 1 就直接 return，弹窗保持隐藏（HTML 里默认 display:none，避免"闪现一下再消失"）。访客点"我知道了"，写入标记并隐藏。

如果想改成"每天弹一次"而不是"只弹一次"，把存的值换成日期字符串，加载时比对当天日期即可：

var today=new Date().toDateString();
if(localStorage.getItem('sea_notice')===today){return;}
// 关闭时：
localStorage.setItem('sea_notice',new Date().toDateString());

这样同一个人每天最多看到一次，适合做每日签到、更新提醒类公告。

弹窗挡住内容、移动端错位怎么排查？

结论：90% 的错位来自定位方式和宽度写法，用 position:fixed 配 transform:translate(-50%,-50%) 是兼容性最好的居中方案，不要用 margin-left 负值硬调。

常见三个问题：一是弹窗被模板自带的 overflow:hidden 容器裁掉，解决办法是把弹窗代码放到 foot.html 的最外层，别塞进任何带定位的 div 里；二是点击后还能滚动背景，可以给 body 加 overflow:hidden、关闭时再移除；三是老版本浏览器不认 localStorage，可以加一句 try{}catch(e){} 兜底，最差情况下每次刷新都弹一次，不影响功能。

如果后台确实有公告管理功能，正确姿势是"后台填内容 + 模板取内容渲染到弹窗"，这样运营改公告不用碰代码。标签调用语法各版本有出入，以你所用版本自带的模板文件里的写法为准，别直接照搬网上的代码，容易出现标签不解析、原样输出到页面上的情况。

总结一句：全站生效放在 foot.html，z-index 给足、宽度留 90%，localStorage 键名带版本号控制弹出频率，改内容只需换版本号或改后台。