ASP.NET USES IFRAME to create the class Modal window

      we often have to in the process of human-computer interaction used in modal window, but in the B/S development, it becomes not easy, although also can use window. showModalDialog function (see http: / / dotnet. aspx. cc/ShowDetail aspx? id= 49ML4AO8-5PB3-4KNY-NJZD-LJOIOXV4M1X4), but most of them are troublesome to use, and you need to set up 2 useless Windows with Frameset in order to send back the value. Not great!

      I found that you can try a IFRAME embedded in the initial page, and then use IFRAME to display a page, and set IFRAME to put in absolute position, Z - Index is set to the highest 9999, so you can put this page covers on the initial interface, when need to display the modal window is displayed the IFRAME IFRAME size can be expanded to cover the initial window, also can cover key items, The goal is to keep the back window from changing. When the window displayed by IFRAME needs to close, just hide its parent IFRAME. In the actual test, it was found that diaplay of IFRAME could not be changed in the child window, so we also need to put IFRAME into an DIV, and control the display of DIV to control the appearance or hiding of the window. But why not just display the window with DIV? There are two reasons: 1.DIV cannot block the Dropdownlist control behind it, while IFRAME can. 2. It is not easy to put the contents in the window into a separate page, and the reusability is poor.

The following is the code that shows and hides using both client and server code:

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=" song style ">
      < 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)
  {
    // place the user code here to initialize the page
    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 = 'China' ");
    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" > Imitate the modal window effect < /font > < /p >
          < p align="center" > < input type="button" onclick="hide()" style="WIDTH: 80px" value=" click close ">
            < 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 >
Summary of   /// 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)
  {
    // place the user code here to initialize the page
    if(!IsPostBack)
    {
      Button1.Attributes.Add("onclick","hide()");
    }
  }

  }