两层或以上的showModalDialog解决方法
在网页制作中经常会碰到数据的新增、修改、删除和查询等基本的功能，如果新增和修改功能是用 IE中的 showModalDialog 弹出对话框来实现新增数据和修改数据功能，新增或修改数据成功返回后则刷新其父页面。但showModalDialog有时候可能会带来一些你不想发生的结果，比如有关一些缓存、刷新，可能也会导致排版的一些问题（说错莫怪，或指正）；前些日子，项目中碰到的就是刷新的问题：
1、当页面为普通的页面时或者应该称为非showModalDialog调用时，进行调用showModalDialog弹出对话框来新增修改数据一切正常;
2、当页面为showModalDialog调用时，再进行调用showModalDialog弹出对话框来新增修改数据或做其它的一些事情，此时刷新就出现了一些问题。
3、也就是说当有两层或两以上的showModalDialog时，刷新就会出现问题了（它们另弹出一个页面）。
解决思路：
1、在<head></head>中加入<base target="_self" />，测试一样的效果。苦闷ing.....
2、通过javascript动态更改网页的地址,什么window.location.href = "url";或window.navigate("url")都不行。
3、baidu了一下查不到什么的解决方法，无奈中~~~，听说showModalDialog中没有location，不知道是不是？
4、看看链接可不可以解决此问题，加入<a href="url" >url</a> 测试一下，咦行得通，哈，那以上的问题也就解决了一大半了。
以下为一些代码：
文件：071214Test ShowModalDialg Step One.htm
文件二：071214Test ShowModalDialg Step Two.htm
文件三：
JS文件：DialogUtil.js
/**
* @author Sam Lin
* @email: linsentong@126.com
* Date:Dec.16,2007
* Memo:This function only for IE browser
*/
function ShowNewOrEditDialog(/*object hash*/info)
{
var strOriginalUrl = document.location.href;
var strHrefID = "ReloadUrlHref";
//strHrefID = "test";
var objHref = null;
var strTargetUrl = info.Url;
var iWidth = info.Width; /*the web page arguments e.g width,height,left etc.*/
var iHeight = info.Height;
var iLeft = screen.availWidth;
var iTop = screen.availHeight;
iLeft = (iLeft - iWidth) / 2;
iTop = (iTop - iHeight) / 2;
var strArgs = "left:" + iLeft + ";top:" + iTop + ";width:" + iWidth + ";height:" + iHeight;
var strResult = window.showModalDialog(strTargetUrl,'',strArgs);
//alert(strOriginalUrl);
/*
if (typeof window.location == "undefined" || typeof window.location == null)
{
alert("Null");
}
else
{
alert(window.location.href + " Not Null");
window.location.href = "http://www.google.cn";
}*/
//window.location.href = "http://www.google.cn";
//create the href element for reload function
// if true load the page
//alert(strResult);
if (strResult != "" && strResult != false && strResult != "undefined" && strResult !=undefined)
{
if ($(strHrefID))
{
objHref = $(strHrefID);
}
else
{
objHref = document.createElement("A");
//objHref.innerText = "Link Me";
//objHref.onclick = function(){alert("OnClick")};
document.body.appendChild(objHref);
}
//objHref.href = strOriginalUrl;
objHref.href = "http://www.cnblogs.com/samlin";
objHref.onclick = function()
{
var oDiv = document.createElement("div");
oDiv.style.width = "300px";
oDiv.style.height = "50px";
oDiv.style.lineHeight = "50px";
oDiv.style.position = "absolute";
oDiv.style.margin = "0 auto";
oDiv.style.padding = "2px";
oDiv.style.display = "block";
oDiv.style.textAlign = "center";
oDiv.style.backgroundColor = "#FFEBCD";
oDiv.style.border = "1px dashed #6595d6";
oDiv.innerText = "Loading another page 
";
//oDiv.style.left = (document.body.availWidth - 300) + "px";
document.body.appendChild(oDiv);
};
fireClickEvent(strHrefID);
objHref.click();
}
}
/**
* @return the object belongs to the specified id
* @param {Object} id
*/
function $(id)
{
return document.getElementById(id);
}
function fireClickEvent(id)
{
var obj = $(id);
if (obj)
{
if (document.all)
{
obj.fireEvent("onclick");
}
else
{
var evt = document.createEvent("MouseEvents");
evt.initEvent("click",true,true);
obj.dispatchEvent(evt);
}
}
}
示例代码：refresh_showModalDialog.rar
1、当页面为普通的页面时或者应该称为非showModalDialog调用时，进行调用showModalDialog弹出对话框来新增修改数据一切正常;
2、当页面为showModalDialog调用时，再进行调用showModalDialog弹出对话框来新增修改数据或做其它的一些事情，此时刷新就出现了一些问题。
3、也就是说当有两层或两以上的showModalDialog时，刷新就会出现问题了（它们另弹出一个页面）。
解决思路：
1、在<head></head>中加入<base target="_self" />，测试一样的效果。苦闷ing.....
2、通过javascript动态更改网页的地址,什么window.location.href = "url";或window.navigate("url")都不行。
3、baidu了一下查不到什么的解决方法，无奈中~~~，听说showModalDialog中没有location，不知道是不是？
4、看看链接可不可以解决此问题，加入<a href="url" >url</a> 测试一下，咦行得通，哈，那以上的问题也就解决了一大半了。
以下为一些代码：
文件：071214Test ShowModalDialg Step One.htm
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <meta name="keywords" content="showModalDialog,弹出对话框,Dialog">
6 <meta name="Author" Content="Sam Lin,林森桐，linsentong@126.com">
7 <meta name="Contact" content="linsentong@126.com" />
8 <META content="showModalDialog -- Sam Lin,弹出对话框解决方法,三层showModalDialog解决方法" name="description">
9 <META content="MSHTML 6.00.2900.3199" name=GENERATOR>
10 <META content=TRUE name=MSSmartTagsPreventParsing>
11 <META http-equiv=MSThemeCompatible content=Yes>
12 <title>Test ShowModalDialg Step One</title>
13 <base target="_self" />
14 <script type="text/javascript" src=DialogUtil.js></script>
15 <style type="text/css">
16 html,body
17 {
18 background:#DCDCDC;
19 }
20 .Description,input
21 {
22 border:1px #6595d6 dashed;
23 padding:5px;
24 margin:0 auto;
25 color:#000;
26 font-size:12px;
27 }
28 a
29 {
30 text-decoration:none;
31 }
32 a:link{color:#4682B4}
33 a:visited{color:#4682B4}
34 a:hover{color:#F4A460}
35 a:active{color:#F4A460}
36 .title
37 {
38 background:#BDB76B;
39 line-height:24px;
40 text-align:left;
41 font-size:16px;
42 padding:2px;
43 font-weight:bold;
44 text-indent:12px;
45 color:#4682B4;
46 }
47
48 </style>
49 </head>
50 <body>
51 <div class="Description">
52 <div class="title">
53 说明
54 </div>
55 Author:Sam Lin<br />
56 Contact:<a href="mailto:linsentong@126.com">linsentong@126.com</a><br />
57 Memo:解决多层弹出对话框出现的问题，合适IE浏览器。<br />
58 Date:Dec.14,2007
59 <br />
60 <br />
61 第一层
62 </div>
63 <br />
64 <input type="button" value="弹出第二层对话框" onclick="ShowNewOrEditDialog({
65 Url:'071214Test ShowModalDialg Step Two.htm',
66 Width:500,Height:400})">
67 </body>
68 </html>
69
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <meta name="keywords" content="showModalDialog,弹出对话框,Dialog">
6 <meta name="Author" Content="Sam Lin,林森桐，linsentong@126.com">
7 <meta name="Contact" content="linsentong@126.com" />
8 <META content="showModalDialog -- Sam Lin,弹出对话框解决方法,三层showModalDialog解决方法" name="description">
9 <META content="MSHTML 6.00.2900.3199" name=GENERATOR>
10 <META content=TRUE name=MSSmartTagsPreventParsing>
11 <META http-equiv=MSThemeCompatible content=Yes>
12 <title>Test ShowModalDialg Step One</title>
13 <base target="_self" />
14 <script type="text/javascript" src=DialogUtil.js></script>
15 <style type="text/css">
16 html,body
17 {
18 background:#DCDCDC;
19 }
20 .Description,input
21 {
22 border:1px #6595d6 dashed;
23 padding:5px;
24 margin:0 auto;
25 color:#000;
26 font-size:12px;
27 }
28 a
29 {
30 text-decoration:none;
31 }
32 a:link{color:#4682B4}
33 a:visited{color:#4682B4}
34 a:hover{color:#F4A460}
35 a:active{color:#F4A460}
36 .title
37 {
38 background:#BDB76B;
39 line-height:24px;
40 text-align:left;
41 font-size:16px;
42 padding:2px;
43 font-weight:bold;
44 text-indent:12px;
45 color:#4682B4;
46 }
47
48 </style>
49 </head>
50 <body>
51 <div class="Description">
52 <div class="title">
53 说明
54 </div>
55 Author:Sam Lin<br />
56 Contact:<a href="mailto:linsentong@126.com">linsentong@126.com</a><br />
57 Memo:解决多层弹出对话框出现的问题，合适IE浏览器。<br />
58 Date:Dec.14,2007
59 <br />
60 <br />
61 第一层
62 </div>
63 <br />
64 <input type="button" value="弹出第二层对话框" onclick="ShowNewOrEditDialog({
65 Url:'071214Test ShowModalDialg Step Two.htm',
66 Width:500,Height:400})">
67 </body>
68 </html>
69
文件二：071214Test ShowModalDialg Step Two.htm
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <meta name="keywords" content="showModalDialog,弹出对话框,Dialog">
6 <meta name="Author" Content="Sam Lin,林森桐，linsentong@126.com">
7 <meta name="Contact" content="linsentong@126.com" />
8 <META content="showModalDialog -- Sam Lin,弹出对话框解决方法,三层showModalDialog解决方法" name="description">
9 <META content="MSHTML 6.00.2900.3199" name=GENERATOR>
10 <META content=TRUE name=MSSmartTagsPreventParsing>
11 <META http-equiv=MSThemeCompatible content=Yes>
12 <title>Test ShowModalDialg Step Two</title>
13 <script type="text/javascript" src=DialogUtil.js></script>
14 <style type="text/css">
15 html,body
16 {
17 background:#DCDCDC;
18 }
19 .Description,input
20 {
21 border:1px #6595d6 dashed;
22 padding:5px;
23 margin:0 auto;
24 color:#000;
25 font-size:12px;
26 }
27 a
28 {
29 text-decoration:none;
30 }
31 a:link{color:#4682B4}
32 a:visited{color:#4682B4}
33 a:hover{color:#F4A460}
34 a:active{color:#F4A460}
35 .title
36 {
37 background:#BDB76B;
38 line-height:24px;
39 text-align:left;
40 font-size:16px;
41 padding:2px;
42 font-weight:bold;
43 text-indent:12px;
44 color:#4682B4;
45 }
46
47 </style>
48
49 <base target="_self" />
50 </head>
51 <body >
52 <div class="Description">
53 <div class="title">
54 说明
55 </div>
56 Author:Sam Lin<br />
57 Contact:<a href="mailto:linsentong@126.com">linsentong@126.com</a><br />
58 Memo:解决多层弹出对话框出现的问题，合适IE浏览器。<br />
59 Date:Dec.14,2007
60 <br />
61 <br />
62 第二层
63 </div>
64
65 <br />
66 <input type="button" value="弹出第三层对话框" onclick="ShowNewOrEditDialog({
67 Url:'071214Test ShowModalDialg Step Three.htm',
68 Width:500,Height:400})">
69 <a href="http://www.cnblogs.com/samlin" id="test" title="林森桐的blog">My Blog</a>
70 <br />
71 <input type="button" value="将页面地址设为：http://www.baidu.com" onclick="javascript:window.location.href = 'http://www.baidu.com';">
72 <input type="button" value="关闭（没有返回值）" onclick="javascript:window.close();" />
73 <input type="button" value="关闭（有返回值）" onclick="javascript:window.returnValue = true;window.close();" />
74 <br />
75 </body>
76 </html>
77
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <meta name="keywords" content="showModalDialog,弹出对话框,Dialog">
6 <meta name="Author" Content="Sam Lin,林森桐，linsentong@126.com">
7 <meta name="Contact" content="linsentong@126.com" />
8 <META content="showModalDialog -- Sam Lin,弹出对话框解决方法,三层showModalDialog解决方法" name="description">
9 <META content="MSHTML 6.00.2900.3199" name=GENERATOR>
10 <META content=TRUE name=MSSmartTagsPreventParsing>
11 <META http-equiv=MSThemeCompatible content=Yes>
12 <title>Test ShowModalDialg Step Two</title>
13 <script type="text/javascript" src=DialogUtil.js></script>
14 <style type="text/css">
15 html,body
16 {
17 background:#DCDCDC;
18 }
19 .Description,input
20 {
21 border:1px #6595d6 dashed;
22 padding:5px;
23 margin:0 auto;
24 color:#000;
25 font-size:12px;
26 }
27 a
28 {
29 text-decoration:none;
30 }
31 a:link{color:#4682B4}
32 a:visited{color:#4682B4}
33 a:hover{color:#F4A460}
34 a:active{color:#F4A460}
35 .title
36 {
37 background:#BDB76B;
38 line-height:24px;
39 text-align:left;
40 font-size:16px;
41 padding:2px;
42 font-weight:bold;
43 text-indent:12px;
44 color:#4682B4;
45 }
46
47 </style>
48
49 <base target="_self" />
50 </head>
51 <body >
52 <div class="Description">
53 <div class="title">
54 说明
55 </div>
56 Author:Sam Lin<br />
57 Contact:<a href="mailto:linsentong@126.com">linsentong@126.com</a><br />
58 Memo:解决多层弹出对话框出现的问题，合适IE浏览器。<br />
59 Date:Dec.14,2007
60 <br />
61 <br />
62 第二层
63 </div>
64
65 <br />
66 <input type="button" value="弹出第三层对话框" onclick="ShowNewOrEditDialog({
67 Url:'071214Test ShowModalDialg Step Three.htm',
68 Width:500,Height:400})">
69 <a href="http://www.cnblogs.com/samlin" id="test" title="林森桐的blog">My Blog</a>
70 <br />
71 <input type="button" value="将页面地址设为：http://www.baidu.com" onclick="javascript:window.location.href = 'http://www.baidu.com';">
72 <input type="button" value="关闭（没有返回值）" onclick="javascript:window.close();" />
73 <input type="button" value="关闭（有返回值）" onclick="javascript:window.returnValue = true;window.close();" />
74 <br />
75 </body>
76 </html>
77
文件三：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <meta name="keywords" content="showModalDialog,弹出对话框,Dialog">
6 <meta name="Author" Content="Sam Lin,林森桐，linsentong@126.com">
7 <meta name="Contact" content="linsentong@126.com" />
8 <META content="showModalDialog -- Sam Lin,弹出对话框解决方法,三层showModalDialog解决方法" name="description">
9 <META content="MSHTML 6.00.2900.3199" name=GENERATOR>
10 <META content=TRUE name=MSSmartTagsPreventParsing>
11 <META http-equiv=MSThemeCompatible content=Yes>
12 <title>071214Test ShowModalDialg Step Three</title>
13 <script type="text/javascript" src=DialogUtil.js></script>
14 <style type="text/css">
15 html,body
16 {
17 background:#DCDCDC;
18 }
19 .Description,input
20 {
21 border:1px #6595d6 dashed;
22 padding:5px;
23 margin:0 auto;
24 color:#000;
25 font-size:12px;
26 }
27 a
28 {
29 text-decoration:none;
30 }
31 a:link{color:#4682B4}
32 a:visited{color:#4682B4}
33 a:hover{color:#F4A460}
34 a:active{color:#F4A460}
35 .title
36 {
37 background:#BDB76B;
38 line-height:24px;
39 text-align:left;
40 font-size:16px;
41 padding:2px;
42 font-weight:bold;
43 text-indent:12px;
44 color:#4682B4;
45 }
46
47 </style>
48 <base target="_self" />
49 </head>
50 <body onbeforeunload="javascript:window.returnValue=true;">
51 <div class="Description">
52 <div class="title">
53 说明
54 </div>
55 Author:Sam Lin<br />
56 Contact:<a href="mailto:linsentong@126.com">linsentong@126.com</a><br />
57 Memo:解决多层弹出对话框出现的问题，合适IE浏览器。<br />
58 Date:Dec.14,2007
59 <br />
60 <br />
61 第三层
62 </div>
63 </body>
64 </html>
65
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <meta name="keywords" content="showModalDialog,弹出对话框,Dialog">
6 <meta name="Author" Content="Sam Lin,林森桐，linsentong@126.com">
7 <meta name="Contact" content="linsentong@126.com" />
8 <META content="showModalDialog -- Sam Lin,弹出对话框解决方法,三层showModalDialog解决方法" name="description">
9 <META content="MSHTML 6.00.2900.3199" name=GENERATOR>
10 <META content=TRUE name=MSSmartTagsPreventParsing>
11 <META http-equiv=MSThemeCompatible content=Yes>
12 <title>071214Test ShowModalDialg Step Three</title>
13 <script type="text/javascript" src=DialogUtil.js></script>
14 <style type="text/css">
15 html,body
16 {
17 background:#DCDCDC;
18 }
19 .Description,input
20 {
21 border:1px #6595d6 dashed;
22 padding:5px;
23 margin:0 auto;
24 color:#000;
25 font-size:12px;
26 }
27 a
28 {
29 text-decoration:none;
30 }
31 a:link{color:#4682B4}
32 a:visited{color:#4682B4}
33 a:hover{color:#F4A460}
34 a:active{color:#F4A460}
35 .title
36 {
37 background:#BDB76B;
38 line-height:24px;
39 text-align:left;
40 font-size:16px;
41 padding:2px;
42 font-weight:bold;
43 text-indent:12px;
44 color:#4682B4;
45 }
46
47 </style>
48 <base target="_self" />
49 </head>
50 <body onbeforeunload="javascript:window.returnValue=true;">
51 <div class="Description">
52 <div class="title">
53 说明
54 </div>
55 Author:Sam Lin<br />
56 Contact:<a href="mailto:linsentong@126.com">linsentong@126.com</a><br />
57 Memo:解决多层弹出对话框出现的问题，合适IE浏览器。<br />
58 Date:Dec.14,2007
59 <br />
60 <br />
61 第三层
62 </div>
63 </body>
64 </html>
65
JS文件：DialogUtil.js
/**
* @author Sam Lin * @email: linsentong@126.com * Date:Dec.16,2007 * Memo:This function only for IE browser */function ShowNewOrEditDialog(/*object hash*/info){ var strOriginalUrl = document.location.href; var strHrefID = "ReloadUrlHref"; //strHrefID = "test"; var objHref = null; var strTargetUrl = info.Url; var iWidth = info.Width; /*the web page arguments e.g width,height,left etc.*/
var iHeight = info.Height; var iLeft = screen.availWidth; var iTop = screen.availHeight; iLeft = (iLeft - iWidth) / 2; iTop = (iTop - iHeight) / 2; var strArgs = "left:" + iLeft + ";top:" + iTop + ";width:" + iWidth + ";height:" + iHeight; var strResult = window.showModalDialog(strTargetUrl,'',strArgs); //alert(strOriginalUrl); /* if (typeof window.location == "undefined" || typeof window.location == null) { alert("Null"); } else { alert(window.location.href + " Not Null"); window.location.href = "http://www.google.cn"; }*/ //window.location.href = "http://www.google.cn"; //create the href element for reload function // if true load the page //alert(strResult); if (strResult != "" && strResult != false && strResult != "undefined" && strResult !=undefined) { if ($(strHrefID)) { objHref = $(strHrefID); } else { objHref = document.createElement("A"); //objHref.innerText = "Link Me"; //objHref.onclick = function(){alert("OnClick")}; document.body.appendChild(objHref); } //objHref.href = strOriginalUrl; objHref.href = "http://www.cnblogs.com/samlin"; objHref.onclick = function() { var oDiv = document.createElement("div"); oDiv.style.width = "300px"; oDiv.style.height = "50px"; oDiv.style.lineHeight = "50px"; oDiv.style.position = "absolute"; oDiv.style.margin = "0 auto"; oDiv.style.padding = "2px"; oDiv.style.display = "block"; oDiv.style.textAlign = "center"; oDiv.style.backgroundColor = "#FFEBCD"; oDiv.style.border = "1px dashed #6595d6"; oDiv.innerText = "Loading another page "; //oDiv.style.left = (document.body.availWidth - 300) + "px"; document.body.appendChild(oDiv); }; fireClickEvent(strHrefID); objHref.click(); } }/** * @return the object belongs to the specified id * @param {Object} id */function $(id){ return document.getElementById(id);}function fireClickEvent(id){ var obj = $(id); if (obj) { if (document.all) { obj.fireEvent("onclick"); } else { var evt = document.createEvent("MouseEvents"); evt.initEvent("click",true,true); obj.dispatchEvent(evt); } }}
