Nous utilisons souvent des fenêtres modales dans l'interaction homme-machine des programmes, mais dans le développement B/S, cela devient difficile, bien que cela puisse également être réalisé en utilisant la fonction window.showModalDialog (voir http://dotnet.aspx .cc/ShowDetail .aspx?id=49ML4AO8-5PB3-4KNY-NJZD-LJOIOXV4M1X4 ), mais la plupart d'entre eux sont difficiles à utiliser et vous devez utiliser Frameset pour créer deux fenêtres inutiles afin de renvoyer la valeur. précis!
J'ai découvert que je pouvais essayer d'intégrer un IFRAME dans la page initiale, puis utiliser l'IFRAME pour afficher une page, définir l'IFRAME pour qu'il soit placé dans une position absolue, et définir l'index Z sur 9999 le plus élevé, de sorte que cette page peut être superposée à la page initiale. Sur l'interface, lorsqu'une fenêtre modale doit être affichée, cet IFRAME est affiché. La taille de l'IFRAME peut être étendue pour couvrir la fenêtre initiale, ou les éléments clés peuvent être couverts. le but est d'éviter la possibilité de modifications dans les fenêtres suivantes. Lorsque la fenêtre affichée par l'IFRAME doit être fermée, masquez simplement son IFRAME parent. Au cours de l'expérience réelle, nous avons constaté que la boîte de dialogue de l'IFRAME ne peut pas être modifiée dans la fenêtre enfant. Par conséquent, nous devons également placer l'IFRAME dans un DIV. En contrôlant l'affichage du DIV, nous pouvons contrôler l'apparence ou le masquage de la fenêtre. . Mais pourquoi ne pas utiliser DIV pour afficher directement la fenêtre ? Il y a deux raisons : 1. DIV ne peut pas bloquer le contrôle Dropdownlist derrière lui, mais IFRAME le peut. 2. Il n'est pas facile de placer le contenu de la fenêtre dans une page Web distincte et la réutilisation est médiocre.
Voici le code du client et du serveur qui sont utilisés pour afficher et masquer :
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>
<TÊTE>
<titre>WebForm1</titre>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<méta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content=" http://schemas.microsoft.com/intellisense/ie5 ">
<langage de script="javascript">
fonction ShowLayer()
{
document.all.MyFormLayer.style.display='';
renvoie faux ;
}
fonction 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 ; GAUCHE : 40 px ; POSITION : absolue ; HAUT : 208 px"
runat="serveur" Largeur="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 ; GAUCHE : 360px ; POSITION : absolue ; HAUT : 336px">
<div id="MyFormLayer" style="AFFICHAGE : aucun;Z-INDEX : 103;GAUCHE : 16 px;LARGEUR : 408 px;POSITION : absolue;HAUT : 24 px;HAUTEUR : 304 px">
<iframe scrolling="no" frameborder="0" width="100%" height="100%" id="IFRAME1" runat="server">
</iframe>
</div>
<asp:Button id="Button2" style="Z-INDEX : 104 ; GAUCHE : 256 px ; POSITION : absolue ; HAUT : 336 px" runat="server"
Text="ASPXTest"></asp:Button>
</form>
</corps>
</HTML>
WebForm1.aspx.cs
....
classe publique WebForm1 : System.Web.UI.Page
{
protégé System.Web.UI.WebControls.DropDownList DropDownList1 ;
protégé System.Web.UI.HtmlControls.HtmlGenericControl IFRAME1 ;
protégé System.Web.UI.WebControls.Button Button2 ;
private void Page_Load (expéditeur de l'objet, System.EventArgs e)
{
//Mettez le code utilisateur ici pour initialiser la page
si(!IsPostBack)
{
}
}
public static void CreateScript (System.Web.UI.Page mapage, chaîne strScript, ID de chaîne)
{
string strscript="<script langage='javascript'>";
strscript += strScript;
strscript += "</script>";
si(!mypage.IsStartupScriptRegistered(ID))
mapage.RegisterStartupScript(ID, strscript);
}
private void Button2_Click (expéditeur d'objet, System.EventArgs e)
{
IFRAME1.Attributes.Add("src","WebForm2.aspx?NAME='Chine'");
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>
<TÊTE>
<titre>WebForm2</titre>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<méta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content=" http://schemas.microsoft.com/intellisense/ie5 ">
<langage de script="javascript">
fonction cacher()
{
parent.MyFormLayer.style.display = "aucun";
}
</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 : début ; BORDER-RIGHT-STYLE : début ; BORDER-LEFT-STYLE : début ; BORDER-BOTTOM-STYLE : début ">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p align="center"><font color="#ffffff">Imiter l'effet de fenêtre modale</font></p>
<p align="center"><input type="button" onclick="hide()" style="WIDTH : 80px" value="Cliquez pour fermer">
<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>
</corps>
</HTML>
Espace de noms
WebFom2.aspx.cs
WSGUI1
{
/// <résumé>
/// Description récapitulative de WebForm2.
/// </summary>
classe publique WebForm2 : System.Web.UI.Page
{
protégé System.Web.UI.WebControls.Button Button1 ;
private void Page_Load (expéditeur de l'objet, System.EventArgs e)
{
//Mettez le code utilisateur ici pour initialiser la page
si(!IsPostBack)
{
Button1.Attributes.Add("onclick","hide()");
}
}
}