IDC资讯中心
我们经常要在程序的人机交互中用到模态窗口，但在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=”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()”); } }
}
