(精)在ASP.NET中使用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 >
         < 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 > &nbsp;
             < 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 ="点击关闭" > &nbsp;&nbsp;&nbsp; </ 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
    }
}