Wir verwenden häufig modale Fenster in der Mensch-Computer-Interaktion von Programmen, aber in der B/S-Entwicklung wird dies nicht einfach, obwohl es auch mit der Funktion window.showModalDialog erreicht werden kann (siehe http://dotnet.aspx .cc/ShowDetail). .aspx?id=49ML4AO8-5PB3-4KNY-NJZD-LJOIOXV4M1X4 ), aber die meisten davon sind umständlich zu verwenden, und Sie müssen Frameset verwenden, um zwei nutzlose Fenster zu erstellen, um den Wert zurückzugeben. genau!
Ich habe herausgefunden, dass ich versuchen kann, einen IFRAME in die Startseite einzubetten und dann den IFRAME zum Anzeigen einer Seite zu verwenden, den IFRAME so festzulegen, dass er an einer absoluten Position platziert wird, und den Z-Index auf den höchsten Wert von 9999 zu setzen Wenn auf der Benutzeroberfläche ein modales Fenster angezeigt werden muss, kann die Größe des IFRAME erweitert werden, um das ursprüngliche Fenster abzudecken Der Zweck besteht darin, die Möglichkeit von Änderungen in nachfolgenden Fenstern zu verhindern. Wenn das vom IFRAME angezeigte Fenster geschlossen werden muss, blenden Sie einfach den übergeordneten IFRAME aus. Während des eigentlichen Experiments haben wir festgestellt, dass der IFRAME-Dialog im untergeordneten Fenster nicht geändert werden kann. Daher müssen wir den IFRAME auch in ein DIV einfügen. Durch die Steuerung der Anzeige des DIV können wir das Erscheinen oder Ausblenden des Fensters steuern . Aber warum nicht DIV verwenden, um das Fenster direkt anzuzeigen? Es gibt zwei Gründe: 1. DIV kann das Dropdownlist-Steuerelement dahinter nicht blockieren, IFRAME jedoch. 2. Es ist nicht einfach, den Inhalt des Fensters auf einer separaten Webseite zu platzieren, und die Wiederverwendbarkeit ist schlecht.
Der folgende Code wird zum Anzeigen und Ausblenden verwendet:
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>
<KOPF>
<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">
Funktion ShowLayer()
{
document.all.MyFormLayer.style.display='';
return false;
}
Funktion 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; LINKS: 40px; POSITION: absolut; OBEN: 208px"
runat="server" Breite="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; LINKS: 360px; POSITION: absolut; OBEN: 336px">
<div id="MyFormLayer" style="DISPLAY: none;Z-INDEX: 103;LEFT: 16px;BREITE: 408px;POSITION: absolut;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: absolut; TOP: 336px" runat="server"
Text="ASPXTest"></asp:Button>
</form>
</body>
</HTML>
WebForm1.aspx.cs
....
öffentliche Klasse 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)
{
//Geben Sie hier den Benutzercode ein, um die Seite zu initialisieren
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>
<KOPF>
<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">
Funktion hide()
{
parent.MyFormLayer.style.display = "none";
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form2" method="post" runat="server">
<table border="0" width="100%" cellpacing="0" cellpadding="0" bgcolor="#6887bb" height="100%"
id="table1" style="BORDER-TOP-STYLE: Anfang; BORDER-RIGHT-STYLE: Anfang; BORDER-LEFT-STYLE: Anfang; BORDER-BOTTOM-STYLE: Anfang">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p align="center"><font color="#ffffff">Modalen Fenstereffekt imitieren</font></p>
<p align="center"><input type="button" onclick="hide()" style="WIDTH: 80px" value="Zum Schließen klicken">
<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
{
/// <Zusammenfassung>
/// Zusammenfassende Beschreibung von WebForm2.
/// </summary>
öffentliche Klasse WebForm2: System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button Button1;
private void Page_Load(object sender, System.EventArgs e)
{
//Geben Sie hier den Benutzercode ein, um die Seite zu initialisieren
if(!IsPostBack)
{
Button1.Attributes.Add("onclick","hide()");
}
}
}