分享人：廣州華軟 無名
一. 前言
對SharePoint二次開發時，需要知道SharePoint有什麼、沒有什麼，才能在開發過程中避免重複造輪子。SharePoint提供了許多開箱即用的功能，這次要介紹的就是模態窗體。
二. 目錄
1.什麼是模態窗體
2.模態窗體的作用
3.如何使用模態窗體
3.1前置條件
3.2模態窗體屬性
3.3父窗體程式碼
3.4子窗體程式碼
4總結
三. 什麼是模態窗體
所謂模態窗體，即在不離開當前頁面的情況下，彈出一個新的獨立子窗體，同時子窗體可以和父窗體進行互動。
在sharepoint中，模態窗體隨處可見，例如檔案上傳功能、檔案共享功能、檔案審批等功能。
四. 模態窗體的作用
在不離開頁面的情況下，與新窗體進行互動。
五. 如何使用模態窗體
5.1 前置條件
自定義應用程式頁面，需引用SharePoint母版頁
<%@ Page Language="C#" DynamicMasterPageFile="~masterurl/default.master" Inherits=" " %>
或者，新增如下檔案引用
<link rel="stylesheet" href="/_layouts/15/1033/styles/Themable/corev15.css?rev=Y" />
其中，1033 表示英語，2052表示簡體中文
<SharePoint:ScriptLink Name="SP.core.js" runat="server" Defer="False" Localizable="false"/>
<SharePoint:ScriptLink Name="SP.js" runat="server" Defer="True" Localizable="false"/>
<Sharepoint:ScriptLink ID="ScriptLink1" Name="sp.ui.dialog.js" LoadAfterUI="true" Localizable="false" runat="server"></Sharepoint:ScriptLink>
5.2 模態窗體屬性
|
標題 |
說明 |
|
url |
子窗體url地址 |
|
html |
HTML程式碼，和URL二選一 |
|
x |
子窗體x座標，預設居中 |
|
y |
子窗體y座標，預設居中 |
|
width |
寬度 |
|
height |
高度 |
|
showClose |
顯示關閉按鈕 |
|
autoSize |
自動大小 |
|
dialogReturnValueCallback |
關閉模態窗體回撥函式 |
5.3 父窗體程式碼
<button type=’button’ onclick=’Open1()’>彈出子窗體</button>
function Open1(){
var options = {
width: 900,//寬度
height: 550,//高度
url: “https://www.***.com?web=1” //子窗體地址
dialogReturnValueCallback: function (res, val) {
//關閉模態窗體回撥函式
//約定： res 值為1 表示操作成功
// val 子窗體傳遞給父傳遞值,通過val來實現兩個窗體互動
}
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
5.4 子窗體程式碼
子窗體可以不做任何操作，但如果需要傳遞值給父窗體，則可以通過自定義關閉子窗體來實現，參考以下程式碼。
<button type=’button’ onclick=’Close1()’></button>
function Close1(){
window.frameElement.commonModalDialogClose(1/*通常用1表示操作成功*/, ‘操作成功’/*返回給父窗體值，與父窗體互動*/);
}
六. 總結
SharePoint的模態窗體應用場景非常廣泛，為我們開發類似功能提供了便利。