我們經常要在程序的人機交互中用到彈出(模態)窗口,但在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" runat="server"></ASP:TextBox> <ASP:Button id="Button4" runat="server" Text="選擇3"></ASP:Button> <asp:TextBox id="TextBox3" runat="server"></ASP:TextBox> <ASP:Button id="Button2" runat="server" Text="選擇2"></ASP:Button> <ASP:Button id="Button3" runat="server" Text="選擇2"></ASP:Button> <br> <br> <br> </FONT> <asp:TextBox id="TextBox1" runat="server"></ASP:TextBox> <ASP:Button id="Button1" runat="server" Text="選擇1"></ASP:Button> <div id="MyFormLayer" > <iframe scrolling="no" frameborder="0" width="100%" height="100%" id="IFRAME1" runat="server" ></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" > <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()" value="點擊關閉"> </p> </td> <td> </td> </tr> <tr> <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 }}
