SharePoint 2013 弹窗效果之URL打开方式(一)

在SharePoint中想做一个弹出效果其实很简单，仅仅在js中使用SharePoint Modal Dialog, 以下做一个简单的例子：很多情况下我们会通过linkButton弹出一个详细页面，那么下面我们将以这样的场景作为例子。

场景： 在结果集里将鼠标停留在"Impact on Product Type" 列，并选中你所需要查看的信息，它将会弹出窗体并显示与impact on product type相关的信息

　　首先我们看一下最终的效果图 (这里我选中第二条数据，在"Impact on Product Type"列下点击65000Transaction Management Software)

　　

　　接下来，我们将设计该弹出功能：

　　1. 在Web Part中添加SharePoint的SPGridView控件(你也可以直接使用ASP里的LinkButton控件)，在SPGridView里添加LinkButton控件，对于如何使用SPGridView控件这里就不多说了

　　因为是在点击Link时将弹出窗体，所以在asp:LinkButton控件需要添加点击事件(OnClientClick='<%#"javascript:openCommentsDialog(\"" + SPEncode.HtmlEncode(Eval("ImapctOnProductGuid") as string) + "\"); return false;" %>'），其中SPEncode.HtmlEncode(Eval("ImapctOnProductGuid") as string)是参数

  <asp:TemplateField HeaderText="Impact on Product Type">
             <ItemTemplate>
                    <asp:LinkButton ID="impactProductLinkButton" runat="server" Text='<%# Bind("ImpactOnProduct") %>'
                     OnClientClick='<%# "javascript:openCommentsDialog(\"" + SPEncode.HtmlEncode(Eval("ImapctOnProductGuid") as string) + "\"); return false;" %>'></asp:LinkButton>
                </ItemTemplate>
  </asp:TemplateField>

　　

　　2. 在客户端Javascript对象模型中的SP.UI.ModalDialog类提供了对话框框架的定义。

　　其中urlStr变量用于存放详细页面的路径及传递参数到详细页面，如果传递参数的数据量比较大，请不要使用该方法，请参考下一篇文章弹窗效果(二)

 function openCommentsDialog(name) {
         var options = SP.UI.$create_DialogOptions();
         var localUrl = window.location;
         var urlStr = localUrl.protocol + "//" + localUrl.host + "/_layouts/15/ImpactOnProductTypeDetial.aspx?impactOnProductGuid=" + name;
         options.url = urlStr; // 定向详细页面的URL
         options.height = 500; // 定义窗体的高度
         options.width = 500; // 定义窗体的高度
 
         SP.UI.ModalDialog.showModalDialog(options);
  }

　　3. 在详细页面中我们需要接收参数并通过参数绑定数据， 由于详细页面因个人需求不同，这里将不做任何讲解。

有些朋友会问如何将详细页面中指定的值返回到父页面呢？这一问题我们将在下一篇文章弹窗效果(三)中讲解.