asp.net I found that I could try to embed an IFRAME in the initial page, then use an IFRAME to display a page, and set the IFRAME to be in absolute position, Z-index set to the highest 9999, so that the page can be overwritten on the initial interface, When the modal window needs to be displayed, the IFRAME is displayed, and the IFRAME can be enlarged to cover the initial window or to cover the key items so as not to make any changes to the window behind it. The iframe display window needs to be closed as long as the IFRAME of its parent is hidden. The actual test found that the diaplay of the IFRAME can not be changed in the child window, so we also need to put the IFRAME in a Div, control the display of the Div can control the appearance of the window or hidden. But why not use Div directly to display the window, for two reasons: 1. The DIV cannot block the DropDownList control behind it, and the IFRAME can. 2. It is not easy to put the contents of the window into a separate Web page, the reusability is poor.
Here's the code, showing that the hide uses both client and server-side 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 Body" >
<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 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 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 description of the 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 page
if (! IsPostBack)
{
BUTTON1.ATTRIBUTES.ADD ("onclick", "Hide ()");
}
}
}
