欢迎光临
我们一直在努力

ASP.NET中使用IFRAME建立类Modal窗口-.NET教程,Asp.Net开发

建站超值云服务器,限时71元/月

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

 }

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » ASP.NET中使用IFRAME建立类Modal窗口-.NET教程,Asp.Net开发
分享到: 更多 (0)