人間とコンピューターのプログラムの対話ではモーダル ウィンドウをよく使用しますが、B/S 開発では、これは簡単ではありません。ただし、window.showModalDialog 関数を使用して実現することもできます ( http://dotnet.aspx .cc/ShowDetail を参照) .aspx?id=49ML4AO8-5PB3-4KNY-NJZD-LJOIOXV4M1X4 ) ですが、それらのほとんどは使用するのが面倒で、値を返すために Frameset を使用して役に立たないウィンドウを 2 つ作成する必要があります。正確な！
最初のページに IFRAME を埋め込み、その IFRAME を使用してページを表示し、IFRAME が絶対位置に配置されるように設定し、Z-Index を最高の 9999 に設定できることがわかりました。このページは、インターフェイス上でモーダル ウィンドウを表示する必要がある場合、最初のウィンドウをカバーするように IFRAME のサイズを拡大して表示することも、主要な項目をカバーすることもできます。目的は、後続のウィンドウで変更が行われる可能性を防ぐことです。 IFRAME によって表示されているウィンドウを閉じる必要がある場合は、その親 IFRAME を非表示にしてください。実際に実験してみると、子ウィンドウでは IFRAME のダイアログを変更できないことがわかりました。そのため、DIV の中に IFRAME を配置する必要があります。DIV の表示を制御することで、ウィンドウの表示/非表示を制御できます。 。しかし、DIV を使用してウィンドウを直接表示しないのはなぜでしょうか。理由は 2 つあります。 1. DIV はその背後にある Dropdownlist コントロールをブロックできませんが、IFRAME はブロックできます。 2. ウィンドウ内のコンテンツを別の Web ページに配置するのは容易ではなく、再利用性が低い。
次のコードは、クライアント コードとサーバー コードの両方を使用して表示および非表示を行います。
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>
<頭>
<title>Webフォーム1</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 ">
<スクリプト言語="javascript">
関数 ShowLayer()
{
document.all.MyFormLayer.style.display='';
false を返します。
}
関数 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: 絶対; TOP: 208px"
runat="サーバー" 幅="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: 絶対; TOP: 336px">
<div id="MyFormLayer" style="表示: なし;Z-インデックス: 103;左: 16 ピクセル;幅: 408 ピクセル;位置: 絶対;上: 24 ピクセル;高さ: 304 ピクセル">
<iframescrolling="no" Frameborder="0" width="100%" height="100%" id="IFRAME1" runat="server">
</iframe>
</div>
<asp:Button id="Button2" style="Z-INDEX: 104; LEFT: 256px; POSITION: 絶対; TOP: 336px" runat="server"
Text="ASPXTest"></asp:Button>
</form>
</body>
</HTML>
WebForm1.aspx.cs
....
パブリック クラス 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(オブジェクト送信者、System.EventArgs e)
{
//ここにユーザーコードを入力してページを初期化します
if(!IsPostBack)
{
}
}
public static void CreateScript(System.Web.UI.Page mypage,string strScript,string ID)
{
文字列 strscript="<script language='javascript'>";
strscript += strScript;
strscript += "</script>";
if(!mypage.IsStartupScriptRegistered(ID))
mypage.RegisterStartupScript(ID, strscript);
}
private void Button2_Click(オブジェクト送信者、System.EventArgs e)
{
IFRAME1.Attributes.Add("src","WebForm2.aspx?NAME='中国'");
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>
<頭>
<title>Webフォーム2</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 ">
<スクリプト言語="javascript">
関数非表示()
{
parent.MyFormLayer.style.display = "なし";
}
</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: アウトセット; BORDER-RIGHT-STYLE: アウトセット; BORDER-LEFT-STYLE: アウトセット; BORDER-BOTTOM-STYLE: アウトセット">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<p align="center"><font color="#ffffff">モーダル ウィンドウ効果を模倣する</font></p>
<p align="center"><input type="button" onclick="hide()" style="WIDTH: 80px" value="クリックして閉じる">
<asp:Button id="Button1" runat="server" Text="ASPXTest"></asp:Button></p>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</テーブル>
</form>
</body>
</HTML>
WebFom2.aspx.cs
名前空間 WSGUI1
{
/// <概要>
/// WebForm2 の概要説明。
/// </概要>
パブリック クラス WebForm2 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Button Button1;
private void Page_Load(オブジェクト送信者、System.EventArgs e)
{
//ここにユーザーコードを入力してページを初期化します
if(!IsPostBack)
{
Button1.Attributes.Add("onclick","hide()");
}
}
}