Home > Developer > ASP

[JavaScript] Using IFRAME in ASP. NET to create a modal-like window

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

We often need to use modal windows in the Human-Computer Interaction of programs. However, in B/S development, this is not easy, although windows can also be used. showmodaldialog function implementation (see http://dotnet.aspx.cc/ShowDetail.aspx? Id = 49ml4ao8-5pb3-4kny-njzd-ljoioxv4m1x4), but most of them are difficult to use. You also need to use frameset to create two useless windows for the return value. Unhappy!

I found that I could try to embed an IFRAME in the initial Page, use IFRAME to display a page, set IFRAME to an absolute position, and set Z-index to a maximum of 9999, in this way, the page can be overwritten on the initial interface. When the modal window needs to be displayed, the IFRAME is displayed. The size of the IFRAME can be expanded to cover the initial window, it can also cover the key items, so that the subsequent windows may not be changed. When the IFRAME display window needs to be closed, you only need to hide the IFRAME of its parent. In actual experiments, we found that the diaplay of IFRAME cannot be changed in the subwindow. Therefore, we also need to put IFRAME in a div to control the display of the DIV to control the appearance or hiding of the window. But why not use Div to display the window directly? There are two reasons: 1. Div cannot block the dropdownlist control behind it, while IFRAME can. 2. It is not easy to place the content in the window to a separate webpage, with poor reusability.

The following code hides the 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 = "">

<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 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"> imitating the modal window effect </font> </P>

<P align = "center"> <input type = "button" onclick = "Hide ()" style = "width: 80px" value = "click to 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 user code here to initialize the page

If (! Ispostback)

{

Button1.attributes. Add ("onclick", "Hide ()");

}

}

}



This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More