ASP.NET中使用IFRAME建立類Modal窗口
2024-07-10 12:56:29
供稿：網友
我發現可以嘗試在初始頁面中嵌入一個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 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 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="點擊關閉">
<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()");
}
}
}
本文來源于網頁設計愛好者web開發社區http://www.html.org.cn收集整理，歡迎訪問。
