我们经常要在程序的人机交互中用到弹出(模态)窗口,但在B/S开发中,这一点就非常不容易了, 虽然我们可以用window.showModalDialog,或者 window.open 这类型的脚本函数实现,但是,非常不好用,一方面涉及回传值,另一方面不能够很好的实现父页面与子页面的交互,一般只能通过在脚本中实现<base target="_self">,方可交互,而且使用这种方式,会产生多个页面,对用户操作不友好.
基于上述情况, 我尝试在初始页面中嵌入一个IFRAME+DIV的方式,来显示可能会用到的弹出(模态)窗口, 另外特别注意,将IFRAME+DIV设置到能覆盖整个页面项,为了弹出(模态)窗口隐藏原页面内容.还有,当需要关闭弹出(模态)窗口
时,只需要将DIV状态改变,即可.
选择IFRAME+DIV的方式,主要是:
1.DIV不能隐藏原页面的控件内容,而IFRAME可以。
2.IFRAME可以整合控件,而DIV做的不好。
详细部分请参考代码:
WebForm1.aspx 前台页面:
基于上述情况, 我尝试在初始页面中嵌入一个IFRAME+DIV的方式,来显示可能会用到的弹出(模态)窗口, 另外特别注意,将IFRAME+DIV设置到能覆盖整个页面项,为了弹出(模态)窗口隐藏原页面内容.还有,当需要关闭弹出(模态)窗口
时,只需要将DIV状态改变,即可.
选择IFRAME+DIV的方式,主要是:
1.DIV不能隐藏原页面的控件内容,而IFRAME可以。
2.IFRAME可以整合控件,而DIV做的不好。
详细部分请参考代码:
WebForm1.aspx 前台页面:
<%
...
@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication2.WebForm1"
%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< title > WebForm1 </ title >
< meta name ="GENERATOR" Content ="Microsoft Visual Studio .NET 7.1" >
< meta name ="CODE_LANGUAGE" Content ="C#" >
< meta name ="vs_defaultClientScript" content ="JavaScript" >
< meta name ="vs_targetSchema" content ="http://schemas.microsoft.com/intellisense/ie5" >
< script language ="javascript" > ...
function ShowLayer()
...{
document.all.MyFormLayer.style.display='';
return false;
}
function SetURL(url)
...{
document.all.IFRAME1.src=url;
}
</ script >
</ HEAD >
< body MS_POSITIONING ="GridLayout" >
< form id ="Form1" method ="post" runat ="server" >
< FONT face ="宋体" >
< asp:TextBox id ="TextBox2" style ="Z-INDEX: 101; LEFT: 64px; POSITION: absolute; TOP: 136px" runat ="server" ></ asp:TextBox >
< asp:Button id ="Button4" style ="Z-INDEX: 107; LEFT: 224px; POSITION: absolute; TOP: 168px" runat ="server"
Text ="选择3" ></ asp:Button >
< asp:TextBox id ="TextBox3" style ="Z-INDEX: 106; LEFT: 64px; POSITION: absolute; TOP: 168px" runat ="server" ></ asp:TextBox >
< asp:Button id ="Button2" style ="Z-INDEX: 103; LEFT: 224px; POSITION: absolute; TOP: 136px" runat ="server"
Text ="选择2" ></ asp:Button >
< asp:Button id ="Button3" style ="Z-INDEX: 105; LEFT: 224px; POSITION: absolute; TOP: 136px" runat ="server"
Text ="选择2" ></ asp:Button >
< br >
< br >
< br >
</ FONT >
< asp:TextBox id ="TextBox1" style ="Z-INDEX: 100; LEFT: 64px; POSITION: absolute; TOP: 104px" runat ="server" ></ asp:TextBox >
< asp:Button id ="Button1" style ="Z-INDEX: 102; LEFT: 224px; POSITION: absolute; TOP: 104px" runat ="server"
Text ="选择1" ></ asp:Button >
< div id ="MyFormLayer" style ="DISPLAY: none;Z-INDEX: 9999;LEFT: 8px;WIDTH: 328px;POSITION: absolute;TOP: 8px;HEIGHT: 256px" >
< iframe scrolling ="no" frameborder ="0" width ="100%" height ="100%" id ="IFRAME1" runat ="server"
style ="WIDTH: 87.29%; HEIGHT: 91.04%" ></ iframe >
</ div >
</ form >
</ body >
</ HTML >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< title > WebForm1 </ title >
< meta name ="GENERATOR" Content ="Microsoft Visual Studio .NET 7.1" >
< meta name ="CODE_LANGUAGE" Content ="C#" >
< meta name ="vs_defaultClientScript" content ="JavaScript" >
< meta name ="vs_targetSchema" content ="http://schemas.microsoft.com/intellisense/ie5" >
< script language ="javascript" > ...
function ShowLayer()
...{
document.all.MyFormLayer.style.display='';
return false;
}
function SetURL(url)
...{
document.all.IFRAME1.src=url;
}
</ script >
</ HEAD >
< body MS_POSITIONING ="GridLayout" >
< form id ="Form1" method ="post" runat ="server" >
< FONT face ="宋体" >
< asp:TextBox id ="TextBox2" style ="Z-INDEX: 101; LEFT: 64px; POSITION: absolute; TOP: 136px" runat ="server" ></ asp:TextBox >
< asp:Button id ="Button4" style ="Z-INDEX: 107; LEFT: 224px; POSITION: absolute; TOP: 168px" runat ="server"
Text ="选择3" ></ asp:Button >
< asp:TextBox id ="TextBox3" style ="Z-INDEX: 106; LEFT: 64px; POSITION: absolute; TOP: 168px" runat ="server" ></ asp:TextBox >
< asp:Button id ="Button2" style ="Z-INDEX: 103; LEFT: 224px; POSITION: absolute; TOP: 136px" runat ="server"
Text ="选择2" ></ asp:Button >
< asp:Button id ="Button3" style ="Z-INDEX: 105; LEFT: 224px; POSITION: absolute; TOP: 136px" runat ="server"
Text ="选择2" ></ asp:Button >
< br >
< br >
< br >
</ FONT >
< asp:TextBox id ="TextBox1" style ="Z-INDEX: 100; LEFT: 64px; POSITION: absolute; TOP: 104px" runat ="server" ></ asp:TextBox >
< asp:Button id ="Button1" style ="Z-INDEX: 102; LEFT: 224px; POSITION: absolute; TOP: 104px" runat ="server"
Text ="选择1" ></ asp:Button >
< div id ="MyFormLayer" style ="DISPLAY: none;Z-INDEX: 9999;LEFT: 8px;WIDTH: 328px;POSITION: absolute;TOP: 8px;HEIGHT: 256px" >
< iframe scrolling ="no" frameborder ="0" width ="100%" height ="100%" id ="IFRAME1" runat ="server"
style ="WIDTH: 87.29%; HEIGHT: 91.04%" ></ iframe >
</ div >
</ form >
</ body >
</ HTML >
WebForm1.aspx 后台页面:
using
System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace WebApplication2
... {
/**//// <summary>
/// WebForm1 的摘要说明。
/// </summary>
public class WebForm1 : System.Web.UI.Page
...{
protected System.Web.UI.WebControls.TextBox TextBox1;
protected System.Web.UI.WebControls.TextBox TextBox2;
protected System.Web.UI.WebControls.Button Button1;
protected System.Web.UI.WebControls.Button Button2;
protected System.Web.UI.WebControls.TextBox TextBox3;
protected System.Web.UI.WebControls.Button Button4;
protected System.Web.UI.HtmlControls.HtmlGenericControl IFRAME1;
protected System.Web.UI.WebControls.Button Button3;
private void Page_Load(object sender, System.EventArgs e)
...{
// 在此处放置用户代码以初始化页面
if(!IsPostBack)
...{
}
}
public static void CreateScript(System.Web.UI.Page mypage,string strScript,string ID)
...{
string strscript="<script language='javascript'>";
strscript += strScript;
strscript += "</script>";
if(!mypage.IsStartupScriptRegistered(ID))
mypage.RegisterStartupScript(ID, strscript);
}
private void Button2_Click(object sender, System.EventArgs e)
...{
IFRAME1.Attributes.Add("src","WebForm2.aspx?NAME='中国'");
CreateScript(Page,"ShowLayer();","SHOW");
}
Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
...{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/**//// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
...{
this.Button4.Click += new System.EventHandler(this.Button2_Click);
this.Button3.Click += new System.EventHandler(this.Button2_Click);
this.Button1.Click += new System.EventHandler(this.Button2_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace WebApplication2
... {
/**//// <summary>
/// WebForm1 的摘要说明。
/// </summary>
public class WebForm1 : System.Web.UI.Page
...{
protected System.Web.UI.WebControls.TextBox TextBox1;
protected System.Web.UI.WebControls.TextBox TextBox2;
protected System.Web.UI.WebControls.Button Button1;
protected System.Web.UI.WebControls.Button Button2;
protected System.Web.UI.WebControls.TextBox TextBox3;
protected System.Web.UI.WebControls.Button Button4;
protected System.Web.UI.HtmlControls.HtmlGenericControl IFRAME1;
protected System.Web.UI.WebControls.Button Button3;
private void Page_Load(object sender, System.EventArgs e)
...{
// 在此处放置用户代码以初始化页面
if(!IsPostBack)
...{
}
}
public static void CreateScript(System.Web.UI.Page mypage,string strScript,string ID)
...{
string strscript="<script language='javascript'>";
strscript += strScript;
strscript += "</script>";
if(!mypage.IsStartupScriptRegistered(ID))
mypage.RegisterStartupScript(ID, strscript);
}
private void Button2_Click(object sender, System.EventArgs e)
...{
IFRAME1.Attributes.Add("src","WebForm2.aspx?NAME='中国'");
CreateScript(Page,"ShowLayer();","SHOW");
}
Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
...{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/**//// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
...{
this.Button4.Click += new System.EventHandler(this.Button2_Click);
this.Button3.Click += new System.EventHandler(this.Button2_Click);
this.Button1.Click += new System.EventHandler(this.Button2_Click);
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
WebForm2.aspx 前台页面:
<%
...
@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="WebApplication2.WebForm2"
%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< title > WebForm2 </ title >
< meta name ="GENERATOR" Content ="Microsoft Visual Studio .NET 7.1" >
< meta name ="CODE_LANGUAGE" Content ="C#" >
< meta name ="vs_defaultClientScript" content ="JavaScript" >
< meta name ="vs_targetSchema" content ="http://schemas.microsoft.com/intellisense/ie5" >
< script language ="javascript" > ...
function hide()
...{
parent.MyFormLayer.style.display = "none";
}
</ script >
</ HEAD >
< body MS_POSITIONING ="GridLayout" >
< form id ="Form2" method ="post" runat ="server" >
< table border ="0" width ="100%" cellspacing ="0" cellpadding ="0" bgcolor ="#6887bb" height ="100%"
id ="table1" style ="BORDER-TOP-STYLE: outset; BORDER-RIGHT-STYLE: outset; BORDER-LEFT-STYLE: outset; BORDER-BOTTOM-STYLE: outset" >
< tr >
< td >
</ td >
< td >
</ td >
< td >
</ td >
</ tr >
< tr >
< td >
</ td >
< td >
< p align ="center" >< font color ="#ffffff" > 选择弹出(模态)窗口的值 </ font ></ p >
< p align ="center" >< input type ="button" onclick ="hide()" style ="WIDTH: 80px" value ="点击关闭" > </ p >
</ td >
< td >
</ td >
</ tr >
< tr >
< td >
</ td >
< td >
</ td >
< td >
</ td >
</ tr >
</ table >
</ form >
</ body >
</ HTML >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< title > WebForm2 </ title >
< meta name ="GENERATOR" Content ="Microsoft Visual Studio .NET 7.1" >
< meta name ="CODE_LANGUAGE" Content ="C#" >
< meta name ="vs_defaultClientScript" content ="JavaScript" >
< meta name ="vs_targetSchema" content ="http://schemas.microsoft.com/intellisense/ie5" >
< script language ="javascript" > ...
function hide()
...{
parent.MyFormLayer.style.display = "none";
}
</ script >
</ HEAD >
< body MS_POSITIONING ="GridLayout" >
< form id ="Form2" method ="post" runat ="server" >
< table border ="0" width ="100%" cellspacing ="0" cellpadding ="0" bgcolor ="#6887bb" height ="100%"
id ="table1" style ="BORDER-TOP-STYLE: outset; BORDER-RIGHT-STYLE: outset; BORDER-LEFT-STYLE: outset; BORDER-BOTTOM-STYLE: outset" >
< tr >
< td >
</ td >
< td >
</ td >
< td >
</ td >
</ tr >
< tr >
< td >
</ td >
< td >
< p align ="center" >< font color ="#ffffff" > 选择弹出(模态)窗口的值 </ font ></ p >
< p align ="center" >< input type ="button" onclick ="hide()" style ="WIDTH: 80px" value ="点击关闭" > </ p >
</ td >
< td >
</ td >
</ tr >
< tr >
< td >
</ td >
< td >
</ td >
< td >
</ td >
</ tr >
</ table >
</ form >
</ body >
</ HTML >
WebForm2.aspx 后台页面:
using
System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace WebApplication2
... {
/**//// <summary>
/// WebForm2 的摘要说明。
/// </summary>
public class WebForm2 : System.Web.UI.Page
...{
private void Page_Load(object sender, System.EventArgs e)
...{
// 在此处放置用户代码以初始化页面
}
Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
...{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/**//// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
...{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace WebApplication2
... {
/**//// <summary>
/// WebForm2 的摘要说明。
/// </summary>
public class WebForm2 : System.Web.UI.Page
...{
private void Page_Load(object sender, System.EventArgs e)
...{
// 在此处放置用户代码以初始化页面
}
Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
...{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/**//// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
...{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}