Html模态窗口和SharePoint模态窗口

先介绍一个showModaldialog的基本用法

使用方法：
vReturnValue = window.showModalDialog(URL [, Arguments] [,Features])

参数说明：
URL--必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
Arguments--可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
Features--可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
1.dialogHeight :对话框高度.
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的，在一般的网页中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

下面主要就针对返回值的两个例子

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <mce:script type="text/javascript"></mce:script> </head> <body> <form name="myform" method="post"> <div> <div><input type="button" name="xxx" value="返回值" onclick="oper()" /><input type="text" name="txtReturnValue" /></div> </div> </form> </body> </html>

//----------------------------------------------------------------------------------------------------------------------

我自己定义了一个.aspx的文件，并没有继承sharepoint的母板页，问题也就发生了，js出现错误，提示：

加上这两句就OK了

<Sharepoint:ScriptLink ID="ScriptLink1" Name="sp.ui.dialog.js" LoadAfterUI="true" Localizable="false" runat="server"></Sharepoint:ScriptLink>
< SharePoint:FormDigest runat="server" />

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

为了使用对话框框架，我们需要首先创建该对话框的选项：

var options = SP.UI.$create_DialogOptions();
options.width = 500;
options.height = 250;
options.url = "/_layouts/StandardsPortal/ChangePassword.aspx";
options.dialogReturnValueCallback = Function.createDelegate(

null, portal_modalDialogClosedCallback);

正如你从上面的代码可以看到的，我们可以设置模式对话框加载时的宽度，高度、URL指向何处（本例中为一个后台自定义应用程序页面）。请注意，我们同时还初始化了回调函数。

一旦选项设置完成，你现在就可以显示模式对话框了：

SP.UI.ModalDialog.showModalDialog(options);

现在，包装所有的代码到一个函数中：

function portal_openModalDialog() {
var options = SP.UI.$create_DialogOptions();
options.width = 500;
options.height = 250;
options.url = "/_layouts/StandardsPortal/ChangePassword.aspx";
options.dialogReturnValueCallback = Function.createDelegate(
null, portal_modalDialogClosedCallback);
SP.UI.ModalDialog.showModalDialog(options);

}

现在你就可以从你的自定义操作中，或者从你的自定义页面中的WebPart，或者从你的自定义功能区按钮中调用该JavaScript函数。以下为自定义操作的XML:

<CustomAction
Id="{F93B1F84-1DBE-4C10-82E3-2CA47346359E}"
Title="修改密码"
Description="修改您的密码"
Sequence="1000"
Location="Microsoft.SharePoint.StandardMenu"
GroupId="PersonalActions"
ImageUrl="~sitecollection/_layouts/images/menulistsettings.gif">
<UrlAction Url="javascript:portal_openModalDialog();"/>
</CustomAction>

请注意我们如何调用该JavaScript对话框：

以下是该对话框的回调函数的代码（实际上非常简单）：

function portal_modalDialogClosedCallback(result, value) {
if (value == '1') {
this.statusId = SP.UI
.Status
.addStatus("密码已修改",
"您的密码已修改。下次登录时请您使用修改后的密码。",
true);
SP.UI.Status.setStatusPriColor(this.statusId, "Green");
}
if (value == '0') {
this.statusId = SP.UI
.Status
.addStatus("密码修改失败",
"您的密码<b>未</b>修改。请重试。", ",
true);
SP.UI.Status.setStatusPriColor(this.statusId, "Green");
}
setTimeout(RemoveStatus, 6000);
}
function RemoveStatus() {
SP.UI.Status.removeStatus(this.statusId);

}

正如你所见，通过传回单一的值，我们可以基于该值检查并显示状态。你也可以通过判断属性值SP.UI.DialogResult.OK或SP.UI.DialogRelut.cancel得到对话框的结果：

function CloseCallback(result, value) {

 if(result === SP.UI.DialogResult.OK) {
alert("点击了确定!");
}
if(result === SP.UI.DialogResult.cancel) {
alert("点击了取消!");
}
}

posted on 2015-07-28 20:52 !无名之辈阅读(281) 评论(0) 收藏举报

刷新页面返回顶部

打酱油

Html模态窗口和SharePoint模态窗口

导航

公告