在ASP.NET中使用IFRAME+DIV,可以实现在同一页面使用弹出(模态)窗口
2008-05-27 11:57
1181 查看
我们经常要在程序的人机交互中用到弹出(模态)窗口,但在B/S开发中,这一点就非常不容易了, 虽然我们可以用window.showModalDialog,或者 window.open 这类型的脚本函数实现,但是,非常不好用,一方面涉及回传值,另一方面不能够很好的实现父页面与子页面的交互,一般只能通过在脚本中实现<base target="_self">,方可交互,而且使用这种方式,会产生多个页面,对用户操作不友好.
基于上述情况, 我尝试在初始页面中嵌入一个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>
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
}
}
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>
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
}
}
基于上述情况, 我尝试在初始页面中嵌入一个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>
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
}
}
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>
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
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- (精)在ASP.NET中使用IFRAME+DIV,可以实现在同一页面使用弹出(模态)窗口
- 如何在ASP.NET中使用div弹出窗口
- ASP.NET弹出窗口Div实现
- DIV+IFrame实现页面弹出窗口
- ASP.NET实现自适应图片大小的弹出窗口(窗口可任意编辑)
- ASP.NET实现自适应图片大小的弹出窗口
- ASP.NET下实现真正的模态窗口
- ASP.NET Ajax实现弹出提示框，页面变灰不可点击
- ASP.NET中在本页面弹出窗口，主页面变成灰色
- ASP.NET Ajax实现弹出提示框，页面变灰不可点击
- Asp.Net中用javascript实现弹出窗口永远居中
- asp.net 弹出窗口 单击确定和取消跳转到指定页面
- Asp.Net 使用模板页也可以给每个页面加CSS文件链接
- ASP.NET MVC中使用OutputCache实现服务器端页面级缓存注意问题
- asp.net 2.0 ajax中实现弹出窗口报警提示
- asp.net 中使用iframe动态加载页面
- asp.net AJAX 定期刷新页面，然后，在 Timer 的事件中弹出窗口
- ASP.NET使用弹出窗口（对话框）的体会
- ASP.NET中使用IFRAME建立类Modal窗口
- ASP.NET之使用Ajax实现页面异步刷新（无需刷新整个页面）