showModalDialog模态对话框 的使用及一般问题的解决
1,使用
showModalDialog(sURL [, oArguments] [,sFeatures])
参数 :
sURL : 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
oArguments : 可选参数 , Object类型,用来向对话框传递参数
sFeatures:可选参数,类型:字符串。用来描述对话框的外观等信息,多个属性用 ; 符号分隔
1. dialogHeight: 对话框高度,不小于100px
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。
2,使用过程中出现的问题
1)页面中点击触发表单提交,会新建标签
该问题出现在IE中
解决方法:
在head标签中 加 <base target="_self"/> 为页面上的所有链接或表达提交地址 规定默认目标
,此处定义为自身,表中页面中所有连接默认在本页打开
2)页面刷新或跳转后 ,无法获取returnValue
该问题出现在谷歌浏览器中
解决方法:
利用window.opener 获取 使用模态对话框的页面的window对象
3)js代码 location.href="Url" 或 后台代码 例如 C#: Response.Redirect("Url") ,控制跳转页面时 ,会新建页打开
该问题出现在IE中
解决方法:
统一交给前台Js控制跳转 代码如下
window.name="targetSelf"; //定义页面句柄
window.open("Url",window.name); //通过指定页面句柄,控制Url在本页面打开
使用此方法后 window.opener 会变为当前页面的window 对象,
对于需要使用 window.opener的代码逻辑会受到影响(例如 问题2 的解决方案 需要用到 window.opener)
完美解决办法
添加 <a id="aBackLink" href="/"></a> 标签,
js代码
document.getElementbyId("aBackLink").click();
此时 页面会跳转,并且不会影响window.opener 对象
4)firefox 浏览器 不支持 showModalDialog方法
解决方法:
利用window.open 替代 showModalDialog方法
1,使用
showModalDialog(sURL [, oArguments] [,sFeatures])
参数 :
sURL : 必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
oArguments : 可选参数 , Object类型,用来向对话框传递参数
sFeatures:可选参数,类型:字符串。用来描述对话框的外观等信息,多个属性用 ; 符号分隔
1. dialogHeight: 对话框高度,不小于100px
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。
例:
Parent.html
var obj = { Paramter : "Paramter" };
var returnValue = window.showModalDialog("modal.html",obj,"dialogWidth=200px;dialogHeight=100px");
alert(returnValue); // 显示 "Return Data"
modal.html
//获取传递的参数
var obj = window.dialogArguments;
alert(obj.Paramter); //显示 "Paramter"
window.returnValue = "Return Data";
2,使用过程中出现的问题
1)页面中点击触发表单提交,会新建标签
该问题出现在IE中
解决方法:
在head标签中 加 <base target="_self"/> 为页面上的所有链接或表达提交地址 规定默认目标
,此处定义为自身,表中页面中所有连接默认在本页打开
2)页面刷新或跳转后 ,无法获取returnValue
该问题出现在谷歌浏览器中
解决方法:
利用window.opener 获取 使用模态对话框的页面的window对象
例:
//modal.html:
if (window.opener) {
window.opener.modalReturnValue = list;
}
window.returnValue = list;
//Parent.html
var var_Value = showModalDialog("modal.html");
if (var_Value == undefined)
var_Value = window.modalReturnValue;
3)js代码 location.href="Url" 或 后台代码 例如 C#: Response.Redirect("Url") ,控制跳转页面时 ,会新建页打开
该问题出现在IE中
解决方法:
统一交给前台Js控制跳转 代码如下
window.name="targetSelf"; //定义页面句柄
window.open("Url",window.name); //通过指定页面句柄,控制Url在本页面打开
使用此方法后 window.opener 会变为当前页面的window 对象,
对于需要使用 window.opener的代码逻辑会受到影响(例如 问题2 的解决方案 需要用到 window.opener)
完美解决办法
添加 <a id="aBackLink" href="/"></a> 标签,
js代码
document.getElementbyId("aBackLink").click();
此时 页面会跳转,并且不会影响window.opener 对象
4)firefox 浏览器 不支持 showModalDialog方法
解决方法:
利用window.open 替代 showModalDialog方法
例:
//Parent.html
if(window.showModalDialog){
var ResultValue = window.showModalDialog("modal.html");
alert(ResultValue);
}else{
window.AsynDialogFunc = function(p_Value){
alert(p_Value);
}
window.open("modal.html");
}
//modal.html
window.returnValue = "returnValue";
if(window.opener){
window.opener.AsynDialogFunc(window.returnValue);
}