We often use modal windows in human-computer interaction of programs, but in B/S development, this becomes not easy, although it can also be achieved using the 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 have to use Frameset to create two useless windows in order to return the value. accurate!
I found that I can try to embed an IFRAME in the initial page, and then use the IFRAME to display a page, and set the IFRAME to be placed in an absolute position, and set the Z-Index to the highest 9999, so that this page can be overlaid on the initial page. On the interface, when a modal window needs to be displayed, this IFRAME is displayed. The size of the IFRAME can be expanded to cover the initial window, or key items can be covered. The purpose is to prevent the possibility of changes in subsequent windows. When the window displayed by the IFRAME needs to be closed, just hide its parent IFRAME. During the actual experiment, we found that the IFRAME's dialog cannot be changed in the child window. Therefore, we also need to put the IFRAME in a DIV. By controlling the display of the DIV, we can 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, but IFRAME can. 2. It is not easy to place the content in the window into a separate web page, and the reusability is poor.
The following is the code. Both client and server code are used to display and hide:
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)
{
//Put 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 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 description 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)
{
//Put user code here to initialize the page
if(!IsPostBack)
{
Button1.Attributes.Add("onclick","hide()");
}
}
}