1、新建页面parent.htm作为父窗口
1
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
2
<
html
>
3
<
head
>
4
<
title
></
title
>
5
<
meta
name
="GENERATOR"
content
="Microsoft Visual Studio .NET 7.1"
>
6
<
meta
name
="ProgId"
content
="VisualStudio.HTML"
>
7
<
meta
name
="Originator"
content
="Microsoft Visual Studio .NET 7.1"
>
8
<
script
language
="javascript"
>
9
<!--
10
/*
*
11
* 用途:打开模态窗口,并且当返回值为true时,刷新窗口
12
*
13
* @param newUrl 模态窗口页面路径
14
* @param wLen 模态窗口宽度
15
* @param iLen 模态窗口高度
16
*
*/
17
function
OpenModalDialog(newURL,wLen,hLen)
18
{
19
try
20
{
21
//
初始化变量,用于接收页面反回值。
22
var
recdata
=
false
;
23
//
模式窗口打开指定的窗口链接
24
recdata
=
showModalDialog(newURL,
"
DescWindow
"
,
25
"
dialogWidth:
"
+
wLen
+
"
px;dialogHeight:
"
+
hLen
+
"
px;center:1;scroll:1;help:0;status:0
"
);
26
27
//
判断对应的返回值
28
if
(recdata
==
true
)
29
{
30
//
刷新当前窗口
31
window.location.reload();
32
window.alert(
"
刷新窗口~~
"
);
33
}
34
}
35
catch
(err)
36
{}
37
}
38
-->
39
</
script
>
40
</
head
>
41
<
body
>
42
<
a
href
="javascript: OpenModalDialog('sub.aspx', 700, 500)"
>
打开模态窗口
</
a
>
43
</
body
>
44
</
html
>
45
2、建立页面sub.aspx:
1
<%
@ Page language
=
"
c#
"
Codebehind
=
"
WebForm1.aspx.cs
"
AutoEventWireup
=
"
false
"
Inherits
=
"
TestSyntax.WebForm1
"
%>
2
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
3
<
HTML
>
4
<
HEAD
>
5
<
title
>
sub
</
title
>
6
<
meta
content
="Microsoft Visual Studio .NET 7.1"
name
="GENERATOR"
>
7
<
meta
content
="C#"
name
="CODE_LANGUAGE"
>
8
<
meta
content
="JavaScript"
name
="vs_defaultClientScript"
>
9
<
meta
content
="http://schemas.microsoft.com/intellisense/ie5"
name
="vs_targetSchema"
>
10
<
base
target
="_self"
>
11
</
HEAD
>
12
<
body
>
13
<
form
id
="Form1"
method
="post"
runat
="server"
>
14
<
asp:Button
id
="btnOk"
runat
="server"
Text
="确 定"
></
asp:Button
>
15
<
INPUT
type
="button"
value
="取 消"
onclick
="javascript: window.close();"
>
16
</
form
>
17
</
body
>
18
</
HTML
>
19
3、sub.aspx.cs代码如下
1
using
System;
2
using
System.Collections;
3
using
System.ComponentModel;
4
using
System.Data;
5
using
System.Drawing;
6
using
System.Web;
7
using
System.Web.SessionState;
8
using
System.Web.UI;
9
using
System.Web.UI.WebControls;
10
using
System.Web.UI.HtmlControls;
11
12
namespace
TestSyntax
13
{
14
///
<summary>
15
///
WebForm1 的摘要说明。
16
///
</summary>
17
public
class
WebForm1 : System.Web.UI.Page
18
{
19
protected
System.Web.UI.WebControls.Button btnOk;
20
21
private
void
Page_Load(
object
sender, System.EventArgs e)
22
{
23
//
在此处放置用户代码以初始化页面
24
}
25
26
#region
Web 窗体设计器生成的代码
27
override
protected
void
OnInit(EventArgs e)
28
{
29
//
30
//
CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
31
//
32
InitializeComponent();
33
base
.OnInit(e);
34
}
35
36
///
<summary>
37
///
设计器支持所需的方法 - 不要使用代码编辑器修改
38
///
此方法的内容。
39
///
</summary>
40
private
void
InitializeComponent()
41
{
42
this
.btnOk.Click
+=
new
System.EventHandler(
this
.btnOk_Click);
43
this
.Load
+=
new
System.EventHandler(
this
.Page_Load);
44
45
}
46
#endregion
47
48
///
<summary>
49
///
操作成功,设定模态窗口的返回值为true,用来刷新父窗口
50
///
</summary>
51
///
<param name="sender"></param>
52
///
<param name="e"></param>
53
private
void
btnOk_Click(
object
sender, System.EventArgs e)
54
{
55
string
strScript
=
@"
<script>window.returnValue=true;window.close();</script>
"
;
56
57
this
.Response.Write(strScript);
58
}
59
}
60
}
61
这样,实现了操作成功后刷新父窗口,又避免了取消操作的无用刷新。
W
eb开发中
适当运用一些弹出子窗口有很多好处,
可以节省页面设计代价,获得好的用户体验,在最近
项目开发中我遇到了几个父子窗口的问题,现在整理给大家,希望有所帮助.
情景一: 打开某一子窗口, 子窗口中任一按钮点击时候不能弹出新页面,进行完操作后,关闭该子窗口,刷新父窗口.
1: 页面A:父窗口,其中有一个打开子窗口的链接,<a href="#"onclick="open()
">页面C</a>
A中有如下js代码:
<
script language
=
"
JavaScript
"
>
function
open()
{
window
.
showModalDialog(
"
页面B
"
);
}
</
script
>
2: 页面B,此为中间页,起过渡作用
B html 代码如下:
<!
DOCTYPE html
PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
<
head
>
<
meta http
-
equiv
=
"
Content-Type
"
content
=
"
text/html; charset=gb2312
"
/>
<
title
>**</
title
>
</
head
>
<
frameset rows
=
"
0,*
"
>
<
frame src
=
"
about:blank
"
>
<
frame src
=
"
页面C
"
>
</
frameset
><
noframes
></
noframes
>
</
html
>
3:页面C ,要打开的子窗口.
它关闭时候刷新父窗口很简单,只要把A中
<a href="#"onclick="open()">页面C</a> 改为
<a href="页面A"onclick="open()">页面C</a>
情景二:打开某一需要用到activex控件子窗口, 子窗口中任一按钮点击时候不能弹出新页面,进行完操作后,关闭该子窗口,刷新父窗口.
此时候就不能用 window.showModalDialog()事件打开模式对话框了,因为activex控件会报错,必须用window.open()
1: 页面A:父窗口,其中有一个打开子窗口的链接,<a href="#"onclick="open()">页面B</a>
A中有如下js代码.
<
script language
=
"
JavaScript
"
>
function
open()
{
window
.
open(
"
页面B
"
,
'
upload
'
,
'
height=400, width=420, top=0, left=0, toolbar=no, menubar=no,scrollbars=no, resizable=no,location=no, status=no
'
);
}
</
script
>
2: 页面B,要打开的子窗口,关闭时候触发window.opener.location.reload();window.close();即可刷新父窗口并且关闭子窗口.
情景三:打开某一子窗口, 让用户选择要添加的东东,譬如要添加到文章里的相片选择后关闭子窗口,然后选择的东东出现在父窗口里.
在下图中,我点击"添加照片"链接然后弹出子窗口,在子窗口中选择后点击"添加照片"按钮,子窗口自动关闭,并且父窗口"已添加照片:"下面列出了我选择的照片。
实现方法:类似情景一需要中间页面B , 只是子窗口C中点击"添加按钮"时触发的js事件中,除了获得选中的checkbox的值外,还要把获得的值回传给父窗口,传值回去的代码如下.
window
.
parent
.
returnValue
=
"
选中的checkbox
"
;
window
.
parent
.
close();
而父窗口要捕获此值就要在情景一中所说的open()事件中添加获得返回值
<
script language
=
"
JavaScript
"
>
function
open()
{
var
str
=
window
.
showModalDialog(
"
页面C
"
);
if
(str
!=
null
)
{
picobj
.
innerHTML
+=
str;
}
}
</
script
>
注意这里的str是获取的返回值, 而picobj是你要显示被选择东东所放位置的div的id ,这里是<div id=picobj></div>