在ASP.NET中使用IFRAME+DIV,可以实现在同一页面使用弹出(模态)窗口

最新推荐文章于 2025-11-07 08:37:49 发布

转载最新推荐文章于 2025-11-07 08:37:49 发布 · 3.7k 阅读

文章标签：

#iframe #div #asp.net #webform #textbox #button

asp.net 专栏收录该内容

135 篇文章

订阅专栏

本文介绍了一种在B/S架构中实现模态窗口的方法，利用IFRAME+DIV技术来创建弹出窗口，有效解决了传统方法中存在的交互难题，并提供了一个具体的实现案例。

我们经常要在程序的人机交互中用到弹出(模态)窗口,但在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>

function ShowLayer()

{

document.all.MyFormLayer.style.display='';

return false;

}

function SetURL(url)

{

document.all.IFRAME1.src=url;

}

</script>

</HEAD>

<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>

</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>

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 窗体设计器生成的代码

}

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>

function hide()

{

parent.MyFormLayer.style.display = "none";

}

</script>

</HEAD>

<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>

</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 窗体设计器生成的代码

}

在ASP.NET中使用IFRAME+DIV,可以实现在同一页面使用弹出(模态)窗口

2 条评论