在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)是参数
1 <asp:TemplateField HeaderText="Impact on Product Type"> 2 <ItemTemplate> 3 <asp:LinkButton ID="impactProductLinkButton" runat="server" Text='<%# Bind("ImpactOnProduct") %>' 4 OnClientClick='<%# "javascript:openCommentsDialog(\"" + SPEncode.HtmlEncode(Eval("ImapctOnProductGuid") as string) + "\"); return false;" %>'></asp:LinkButton> 5 </ItemTemplate> 6 </asp:TemplateField>
2. 在客户端Javascript对象模型中的SP.UI.ModalDialog类提供了对话框框架的定义。
其中urlStr变量用于存放详细页面的路径及传递参数到详细页面，如果传递参数的数据量比较大，请不要使用该方法，请参考下一篇文章弹窗效果(二)
1 function openCommentsDialog(name) { 2 var options = SP.UI.$create_DialogOptions(); 3 var localUrl = window.location; 4 var urlStr = localUrl.protocol + "//" + localUrl.host + "/_layouts/15/ImpactOnProductTypeDetial.aspx?impactOnProductGuid=" + name; 5 options.url = urlStr; // 定向详细页面的URL 6 options.height = 500; // 定义窗体的高度 7 options.width = 500; // 定义窗体的高度 8 9 SP.UI.ModalDialog.showModalDialog(options); 10 }
3. 在详细页面中我们需要接收参数并通过参数绑定数据， 由于详细页面因个人需求不同，这里将不做任何讲解。
有些朋友会问如何将详细页面中指定的值返回到父页面呢？这一问题我们将在下一篇文章弹窗效果(三)中讲解.
