showModalDialog模态对话框 的使用及一般问题的解决

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);
}

转载于:https://www.cnblogs.com/wycm/p/5338909.html