联系我们ASP.NET中使用IFRAME建立类Modal窗口
来源：天天加油 更新时间：2005-5-15
您正在看的.Net是:ASP.NET中使用IFRAME建立类Modal窗口。
我们经常要在程序的人机交互中用到模态窗口，但在B/S开发中，这一切变得不容易了，虽然也可以用window.showModalDialog函数实现（见http://dotnet.aspx.cc/ShowDetail.aspx?id=49ML4AO8-5PB3-4KNY-NJZD-LJOIOXV4M1X4），但多数用起来麻烦，还要为了回传值用Frameset建立2个无用的窗口。不爽！
我发现可以尝试在初始页面中嵌入一个IFRAME，然后用IFRAME来显示一个页面，并将IFRAME设定为按绝对位置摆放，Z-Index设置为最高的9999，这样就可以将这个页面覆盖在初始界面上，当需要显示模态窗口时，就显示这个IFRAME，可以将IFRAME的尺寸扩大到能覆盖住初始窗口，也可以盖住关键项，目的就是不让后面的窗口有什么变化的可能。在IFRAME显示的窗口需要关闭时只要对它的parent的IFRAME隐藏就可以了。实际试验时发现IFRAME的diaplay不能在子窗口被改变，所以，我们还需要将IFRAME放到一个DIV中，控制DIV的显示就可以控制窗口的出现或隐藏。但为什么不直接用DIV来显示窗口呢，原因有两个：1.DIV不能遮挡它后面的Dropdownlist控件，而IFRAME能。2.不容易将窗口内的内容放置到一个单独的网页中，复用性差。
以下是代码，显示隐藏使用了客户端和服务端代码两种写法：
WebForm1.aspx
<%@ Page language=c# Codebehind=WebForm1.aspx.cs AutoEventWireup=false Inherits=WSGUI1.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:DropDownList id=DropDownList1 style=Z-INDEX: 101; LEFT: 40px; POSITION: absolute; TOP: 208px runat=server Width=184px> <asp:ListItem Value=TEST1>q</asp:ListItem> <asp:ListItem Value=TEST2>w</asp:ListItem> <asp:ListItem Value=TEST3>e</asp:ListItem> <asp:ListItem Value=TEST4>r</asp:ListItem> </asp:DropDownList></FONT> <input type=button name=MyButton value=TEST id=MyButton onclick=ShowLayer();SetURL(WebForm2.aspx) style=Z-INDEX: 102; LEFT: 360px; POSITION: absolute; TOP: 336px> <div id=MyFormLayer style=DISPLAY: none;Z-INDEX: 103;LEFT: 16px;WIDTH: 408px;POSITION: absolute;TOP: 24px;HEIGHT: 304px> <iframe scrolling=no frameborder=0 width=100% height=100% id=IFRAME1 runat=server> </iframe> </div> <asp:Button id=Button2 style=Z-INDEX: 104; LEFT: 256px; POSITION: absolute; TOP: 336px runat=server Text=ASPXTest></asp:Button> </form> </body> </HTML>
WebForm1.aspx.cs
....
public class WebForm1 : System.Web.UI.Page { protected System.Web.UI.WebControls.DropDownList DropDownList1; protected System.Web.UI.HtmlControls.HtmlGenericControl IFRAME1; protected System.Web.UI.WebControls.Button Button2; private void Page_Load(object sender, System.EventArgs e) { // 在此处放置用户代码以初始化页面 if(!IsPostBack) { } } public static void
返回 .Net 教程列表.Net点击排行
排行
- C#版的网站新闻发布系统
- ASP.NET窗体对话框的实现
- ASP.NET中使用IFRAME建立类Modal
- 给Asp.Net初学者的关于继承和多态
- 在ASP.NET中上传图片并生成缩略图
- ASP.NET程序中用Repeater实现分页
- 用asp.net还原与恢复sqlserver数
- 为ASP.NET封装的SQL数据库访问类
- 用ASP.Net(C#)连接Oracle数据库的
- ASP.NET系统用户权限设计与实现
- 在asp.net中为Web用户控件添加属
- ASP.NET对IIS中的虚拟目录进行操
- ASP.NET中利用cookies保持客户端
- ASP.NET下MVC设计模式的实现
- Asp.net+Xml实现无数据库论坛一点
- ASP.Net中自定义Http处理及应用之
- 在ASP.Net中应用javascript
- ASP.NET窗体对话框的实现
- C#版的网站新闻发布系统
- 在VB.NET中使用MS Access存储过程
- ASP.NET中使用IFRAME建立类Modal
- 给Asp.Net初学者的关于继承和多态
- 在ASP.NET中上传图片并生成缩略图
- ASP.NET程序中用Repeater实现分页
- 用asp.net还原与恢复sqlserver数
- 为ASP.NET封装的SQL数据库访问类
- 用ASP.Net(C#)连接Oracle数据库的
- 保存图片流到数据库之后固定显示
- ASP.NET系统用户权限设计与实现
- 在asp.net中为Web用户控件添加属
- ASP.NET对IIS中的虚拟目录进行操
- ASP.NET中利用cookies保持客户端
- 在ASP.Net中应用javascript
- ASP.NET窗体对话框的实现
- C#版的网站新闻发布系统
- 在ASP.NET中上传图片并生成缩略图
- ASP.NET程序中用Repeater实现分页
- 用asp.net还原与恢复sqlserver数
- 为ASP.NET封装的SQL数据库访问类
- 用ASP.Net(C#)连接Oracle数据库的
- ASP.NET系统用户权限设计与实现
- 在asp.net中为Web用户控件添加属
- ASP.NET对IIS中的虚拟目录进行操
- ASP.NET中利用cookies保持客户端
- ASP.NET下MVC设计模式的实现
- Asp.net+Xml实现无数据库论坛一点
- ASP.NET编程中的十大技巧
- TreeView使用笔记
最近更新
ASP.NET中使用IFRAME建立类Modal窗口