天天看點
傳回

ASP.NET中使用IFRAME建立類Modal視窗

我發現可以嘗試在初始頁面中嵌入一個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 >

<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" οnclick="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" frame 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 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");

}

}

WebForm2.aspx

<％@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="WSGUI1.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 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" οnclick="hide()" style="WIDTH: 80px" value="點選關閉">

<asp:Button id="Button1" runat="server" Text="ASPXTest"></asp:Button></p>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

</form>

</body>

</HTML>

WebFom2.aspx.cs

namespace WSGUI1

{

/// <summary>

/// WebForm2 的摘要說明。

/// </summary>

public class WebForm2 : System.Web.UI.Page

{

protected System.Web.UI.WebControls.Button Button1;

private void Page_Load(object sender, System.EventArgs e)

{

// 在此處放置使用者代碼以初始化頁面

if(!IsPostBack)

{

Button1.Attributes.Add("onclick","hide()");

}

}

}  

iframe asp.net webform button javascript microsoft
上一篇: hjr-ASP.NET：Webservice
下一篇: asp.net中使用urlrewrite的方法

繼續閱讀