zoukankan      html  css  js  c++  java
  • 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="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()");
       }
      }

     }


    原文:
    http://blog.csdn.net/xujh/
  • 相关阅读:
    简明Python3教程 12.问题解决
    简明Python3教程 11.数据结构
    【SPOJ 694】Distinct Substrings
    【codeforces Manthan, Codefest 17 C】Helga Hufflepuff's Cup
    【CF Manthan, Codefest 17 B】Marvolo Gaunt's Ring
    【CF Manthan, Codefest 17 A】Tom Riddle's Diary
    【SPOJ 220】 PHRASES
    【POJ 3261】Milk Patterns
    【POJ 3294】Life Forms
    【POJ 1226】Substrings
  • 原文地址:https://www.cnblogs.com/dagon007/p/129901.html
Copyright © 2011-2022 走看看