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