在 Sharepoint 上打开新页面时添加弹出窗口

Posted 2023-03-27

【中文标题】在 Sharepoint 上打开新页面时添加弹出窗口

【英文标题】：Adding Pop Up Window when New Page Opens on Sharepoint

【发布时间】：2017-03-08 15:08:26

【问题描述】：

我目前正在重新设计 SharePoint 上的页面，但在打开新页面时无法添加弹出窗口。我希望用户点击进入一个新页面，当新页面打开时，会出现一个带有消息的弹出窗口。

我对 SharePoint 还很陌生，因此我觉得这很困难。

我已经看到使用 JQUERY、javascript、html 等的解决方案，但不确定如何使用 SharePoint（在 .aspx 页面上）准确实现它

我想不惜一切代价避免使用 JQUERY 和 Javascript，因为它们不是我最擅长的领域。

是添加新的 Web 部件并将代码嵌入其中吗？

任何帮助将不胜感激。

【问题讨论】：

你可以使用类似 的东西吗？但这会打开一个新窗口而不是弹出窗口！

是的，我之前尝试过嵌入上面的代码，但它只显示了一个没有打开任何东西的链接的措辞。当用户打开页面时，我需要打开一条弹出消息

你能直观地展示一些你所期待的东西吗？我认为您对工具提示、弹出窗口和新窗口有点混淆。

我正在寻找一个弹出窗口。因此，当用户打开某个页面时，他们会收到一条弹出消息提示，即欢迎。

@Ryan，您使用的是什么版本的 SharePoint？

【参考方案1】：

添加脚本编辑器 Webpart (Sharepoint 2013) 然后添加下面给出的代码

  $(document).ready(function()
    $('#overlay, #popup').css('display', 'block');


  $('#overlay').click(function()
    $('#overlay, #popup').css('display', 'none');
  );

 );

添加内容编辑器 webpart，然后在此处添加 CSS 和 HTML

 <input type="button" id="btn" value="Click Here" />
 <div id="overlay"></div>
 <div id="popup"></div>

当涉及到弹出窗口时，您无法完全避免使用 Javascript，请在​​ Fiddle 中查找完整代码。 （在小提琴示例中，而不是直接在就绪函数中单击添加代码）

http://jsfiddle.net/JRD06/sx0mjwe1/

或者使用这个

https://fiddle.jshell.net/nikhilmangal/srg3gy26/light/

【参考方案2】：

SharePoint 2010 和 SharePoint 2013 中包含的 JavaScript 库包括用于以标准方式轻松创建和显示对话框的方法。

为此，您只需执行SP.UI.ModalDialog.showModalDialog()。

例如：

SP.SOD.executeOrDelayUntilScriptLoaded(showDialog,"sp.js");

function showDialog()
    var dialogOptions = SP.UI.$create_DialogOptions();
    dialogOptions.title = "Your Title Here!";
    var dummyElement = document.createElement("div");
    dummyElement.innerHTML = "<h1>Your HTML Goes Here</h1>"
    dialogOptions.html = dummyElement;
    SP.UI.ModalDialog.showModalDialog(dialogOptions);    

要让 JavaScript 在页面加载时运行，您可以将其嵌入到 Web 部件中。

在 SharePoint 2010 中，将 JavaScript 代码保存到文本文件中（周围带有 <script> 标记）并将其保存到 SharePoint 网站上的库中，然后将内容编辑器 Web 部件添加到需要代码的页面运行，并将 Web 部件的“内容链接”属性设置为文本文件的路径。 在 SharePoint 2013 中，使用脚本编辑器 Web 部件嵌入所需的 JavaScript。