SharePoint Online 2023：无第三方工具实现点击弹窗公告求助

针对你的需求，以下两种原生方案可以实现点击按钮弹出公告窗口，无需依赖第三方应用：

方法一：现代页面嵌入HTML+JavaScript（静态公告快速实现） #

适合固定内容的公告，操作简单：

1. 打开目标SharePoint现代页面，点击右上角「编辑」进入编辑模式
2. 添加「嵌入代码」Web部件
3. 将下方代码粘贴到嵌入框中，替换公告内容和样式即可：

<button id="showAnnouncementBtn" style="padding: 8px 16px; background: #0078d4; color: white; border: none; border-radius: 4px; cursor: pointer;">查看最新公告</button>

<!-- 弹窗容器 -->
<div id="announcementModal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
  <div style="background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 600px; border-radius: 8px;">
    <span id="closeModalBtn" style="color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer;">&times;</span>
    <h3>团队最新公告</h3>
    <p>这里替换成你的公告内容：</p>
    <ul>
      <li>本周三下午2点召开项目进度同步会</li>
      <li>新文档审批流程已上线，详见内部指南</li>
    </ul>
  </div>
</div>

<script>
// 绑定按钮和弹窗事件
const btn = document.getElementById('showAnnouncementBtn');
const modal = document.getElementById('announcementModal');
const closeBtn = document.getElementById('closeModalBtn');

btn.onclick = () => modal.style.display = "block";
closeBtn.onclick = () => modal.style.display = "none";
window.onclick = (e) => e.target === modal && (modal.style.display = "none");
</script>

注意事项 #

• 如果遇到嵌入代码权限问题，联系站点管理员开启站点的「自定义脚本」设置
• 可自行修改按钮颜色、弹窗尺寸、公告文本等样式和内容

方法二：SharePoint列表+Power Apps（动态公告场景） #

适合需要定期更新公告内容的场景，无需编写代码：

1. 创建一个SharePoint公告列表，添加「标题」「公告内容」「发布日期」等字段，录入公告数据
2. 在目标页面编辑模式下添加「Power Apps」Web部件，选择「创建新应用」
3. 在Canvas应用编辑器中：
   • 添加一个按钮控件，设置显示文本为「查看公告」
   • 添加一个弹窗控件（如「弹出」容器），在容器内添加标签控件，绑定到公告列表的最新内容
   • 设置按钮的「OnSelect」属性为显示弹窗的操作
4. 保存并发布应用，回到SharePoint页面完成配置

两种方案均基于SharePoint原生功能，无需第三方工具，可根据你的实际需求选择使用。

内容的提问来源于stack exchange，提问作者Gimojy