【问题标题】:Adding Pop Up Window when New Page Opens on Sharepoint在 Sharepoint 上打开新页面时添加弹出窗口
【发布时间】:2017-03-08 15:08:26
【问题描述】:

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

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

我已经看到使用 JQUERY、Javascript、HTML 等的解决方案,但不确定如何使用 SharePoint(在 .aspx 页面上)准确实现它

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

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

任何帮助将不胜感激。

【问题讨论】:

  • 是的,我之前尝试过嵌入上面的代码,但它只显示了一个没有打开任何东西的链接的措辞。当用户打开页面时,我需要打开一条弹出消息
  • 你能直观地展示一些你所期待的东西吗?我认为您对工具提示、弹出窗口和新窗口有点混淆。
  • 我正在寻找一个弹出窗口。因此,当用户打开某个页面时,他们会收到一条弹出消息提示,即欢迎。
  • @Ryan,您使用的是什么版本的 SharePoint?

标签: javascript jquery html sharepoint web-parts


【解决方案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 代码保存到文本文件中(周围带有 &lt;script&gt; 标记)并将其保存到 SharePoint 网站上的库中,然后将内容编辑器 Web 部件添加到需要代码的页面运行,并将 Web 部件的“内容链接”属性设置为文本文件的路径。
    • 在 SharePoint 2013 中,使用脚本编辑器 Web 部件嵌入所需的 JavaScript。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-06-03
      • 1970-01-01
      • 1970-01-01
      • 2011-10-31
      • 2016-07-26
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多