About Sharepoint Dialog Framework

SP.UI.Dialog.js (SP.UI.Dialog.debug.js)

 

function showDialog() {
  var options = {
    url: 'http://sharepoint2010.microsoft.com',
    700,
    title: 'Microsoft SP2010',
    allowMaximize: true,
    showClose: true,

    dialogReturnValueCallback : myCallback
  }
  SP.UI.ModalDialog.showModalDialog(options);
}

function myCallback(dialogResult, returnValue) {
  alert('I am back!')
}

 

SP.UI.DialogResult.prototype = {

invalid: -1,

cancel: 0,

OK: 1

}

 

window.frameElement.cancelPopUp()

方法名                               参数                               描述

cancelPopUp                       --                                    Closes the dialog and returns SP.UI.DialogResult.cancel (0) as the dialog result.
commitPopup                      returnValue                      Closes the dialog and returns SP.UI.DialogResult.OK (1) as the dialog result. Additionally, the return value property is set.
commitPopupAndRedirect     redirectUrl                       Closes the dialog with SP.UI.DialogResult.cancel (0) as the dialog result and redirects to a URL.
commonModalDialogClose    dialogResult, returnValue   Closes the dialog with a dialog result and a return value.
navigateParent                     --                                    Navigates to the parent page.

 

所有可用的Dialog选项，请参考这个：http://msdn.microsoft.com/en-us/library/ff410058.aspx

html, 如果同时指定html和url，会应用url而忽略html

showMaximized：是否自动最大化显示

autoSize

x, y 可以指定显示起始坐标 

如果没有指定 width, height，并且autoSize为设置成了false（默认为true）width会默认为768，height默认为576

 

两种语法：

//Using the DialogOptions class.
var options = SP.UI.$create_DialogOptions();

options.title = "My Dialog Title";
options.width = 400;
options.height = 600;
options.url = "/_layouts/DialogPage.aspx";

SP.UI.ModalDialog.showModalDialog(options);

//Using a generic object.
var options = {
    title: "My Dialog Title",
    400,
    height: 600,
    url: "/_layouts/DialogPage.aspx" };

SP.UI.ModalDialog.showModalDialog(options);

SPContext.Current.IsPopUI 属性可以在服务器端判断某页面是否运行在Dialog模式下

在客户端，可以解析QueryString IsDlg=1来判断，也可以用 if (window.frameElement) 来判断

 

在构建你的页面的时候，你可以指定某区域不在Dialog模式下显示，应用某个css Class: .s4-notdlg

Published by Wiz