ASP.NET中使用IFRAME建立类Modal窗口
我们经常要在程序的人机交互中用到模态窗口，但在b/s开发中，这一切变得不容易了，虽然也可以用window.showmodaldialog函数实现（见http://dotnet.aspx.cc/showdetail.aspx?id=49ml4ao8-5pb3-4kny-njzd-ljoioxv4m1x4），但多数用起来麻烦，还要为了回传值用frameset建立2个无用的窗口。不爽！
我发现可以尝试在初始页面中嵌入一个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="">
<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="">
<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()");
}
}
}