เรามักจะใช้หน้าต่างโมดอลในการโต้ตอบระหว่างมนุษย์กับคอมพิวเตอร์ของโปรแกรม แต่ในการพัฒนา B/S สิ่งนี้ไม่ใช่เรื่องง่าย แม้ว่าจะสามารถทำได้โดยใช้ฟังก์ชัน window.showModalDialog (ดู http://dotnet.aspx .cc/ShowDetail .aspx?id=49ML4AO8-5PB3-4KNY-NJZD-LJOIOXV4M1X4 ) แต่ส่วนใหญ่ใช้งานยาก และคุณต้องใช้ Frameset เพื่อสร้างหน้าต่างที่ไม่มีประโยชน์สองหน้าต่างเพื่อส่งคืนค่า แม่นยำ!
ฉันพบว่าฉันสามารถลองฝัง IFRAME ในหน้าเริ่มต้นได้ จากนั้นใช้ IFRAME เพื่อแสดงเพจ และตั้งค่า IFRAME ให้อยู่ในตำแหน่งที่แน่นอน และตั้งค่า Z-Index เป็นค่าสูงสุด 9999 ดังนั้น หน้านี้สามารถซ้อนทับบนหน้าเริ่มต้นได้ บนอินเทอร์เฟซ เมื่อจำเป็นต้องแสดงหน้าต่างโมดอล IFRAME นี้จะปรากฏขึ้น ขนาดของ IFRAME สามารถขยายให้ครอบคลุมหน้าต่างเริ่มต้น หรือสามารถครอบคลุมรายการหลักได้ จุดประสงค์คือเพื่อป้องกันความเป็นไปได้ของการเปลี่ยนแปลงในหน้าต่างถัดไป เมื่อจำเป็นต้องปิดหน้าต่างที่แสดงโดย IFRAME ให้ซ่อน IFRAME ระดับบนสุด ในระหว่างการทดสอบจริง เราพบว่ากล่องโต้ตอบของ IFRAME ไม่สามารถเปลี่ยนแปลงได้ในหน้าต่างย่อย ดังนั้นเราจึงจำเป็นต้องใส่ IFRAME ไว้ใน DIV ด้วยการควบคุมการแสดงผลของ DIV เราจึงสามารถควบคุมลักษณะที่ปรากฏหรือการซ่อนหน้าต่างได้ . แต่ทำไมไม่ใช้ DIV เพื่อแสดงหน้าต่างโดยตรง มีเหตุผลสองประการ: 1. DIV ไม่สามารถบล็อกการควบคุมรายการแบบหล่นลงด้านหลังได้ แต่ IFRAME สามารถทำได้ 2. การวางเนื้อหาในหน้าต่างลงในหน้าเว็บแยกต่างหากไม่ใช่เรื่องง่าย และการนำกลับมาใช้ใหม่ได้ไม่ดี
ต่อไปนี้เป็นรหัส ใช้ทั้งรหัสไคลเอ็นต์และเซิร์ฟเวอร์เพื่อแสดงและซ่อน:
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>WebForm1</title>
<meta name = "เครื่องกำเนิดไฟฟ้า" เนื้อหา = "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 ">
<ภาษาสคริปต์ = "จาวาสคริปต์">
ฟังก์ชั่น ShowLayer()
-
document.all.MyFormLayer.style.display='';
กลับเท็จ;
-
ฟังก์ชั่น SetURL (URL)
-
document.all.IFRAME1.src=url;
-
</สคริปต์>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<FONT face="宋体">
<asp:DropDownList id="DropDownList1" style="Z-INDEX: 101; ซ้าย: 40px; ตำแหน่ง: สัมบูรณ์; 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; ซ้าย: 360px; ตำแหน่ง: สัมบูรณ์; บน: 336px">
<div id="MyFormLayer" style="DISPLAY: none;Z-INDEX: 103;LEFT: 16px;WIDTH: 408px;POSITION: Absolute;TOP: 24px;HEIGHT: 304px">
<การเลื่อน iframe = "ไม่" frameborder = "0" width = "100%" height = "100%" id = "IFRAME1" runat = "เซิร์ฟเวอร์">
</iframe>
</div>
<asp:Button id = "Button2" style = "Z-INDEX: 104; LEFT: 256px; POSITION: สัมบูรณ์; TOP: 336px" runat = "เซิร์ฟเวอร์"
ข้อความ = "ASPXTest"></asp:ปุ่ม>
</แบบฟอร์ม>
</ร่างกาย>
</HTML>
WebForm1.aspx.cs
....
WebForm1 ระดับสาธารณะ: System.Web.UI.Page
-
ป้องกัน System.Web.UI.WebControls.DropDownList DropDownList1;
ป้องกัน System.Web.UI.HtmlControls.HtmlGenericControl IFRAME1;
ป้องกัน System.Web.UI.WebControls.Button Button2;
โมฆะส่วนตัว Page_Load (ผู้ส่งวัตถุ System.EventArgs e)
-
//ใส่รหัสผู้ใช้ที่นี่เพื่อเริ่มต้นเพจ
ถ้า(!IsPostBack)
-
-
-
โมฆะสาธารณะคง CreateScript (System.Web.UI.Page mypage, สตริง strScript, ID สตริง)
-
สตริง strscript="<script language='javascript'>";
strscript += strscript;
strscript += "</script>";
ถ้า(!mypage.IsStartupScriptRegistered(ID))
mypage.RegisterStartupScript(ID, strscript);
-
โมฆะส่วนตัว Button2_Click (ผู้ส่งวัตถุ System.EventArgs e)
-
IFRAME1.Attributes.Add("src","WebForm2.aspx?NAME='จีน'");
CreateScript(หน้า,"ShowLayer();", "SHOW");
-
-
WebForm2.aspx
<%@ ภาษาเพจ = "c#" Codebehind = "WebForm2.aspx.cs" AutoEventWireup = "false" สืบทอด = "WSGUI1.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<หัว>
<title>WebForm2</title>
<meta name = "เครื่องกำเนิดไฟฟ้า" เนื้อหา = "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 ">
<ภาษาสคริปต์ = "จาวาสคริปต์">
ฟังก์ชั่นซ่อน()
-
parent.MyFormLayer.style.display = "ไม่มี";
-
</สคริปต์>
</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">เลียนแบบเอฟเฟกต์หน้าต่างโมดอล</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>
</ตาราง>
</แบบฟอร์ม>
</ร่างกาย>
</HTML>
เนมสเปซ
WebFom2.aspx.cs
WSGUI1
-
/// <สรุป>
/// คำอธิบายโดยย่อของ WebForm2
/// </สรุป>
WebForm2 ระดับสาธารณะ: System.Web.UI.Page
-
ป้องกัน System.Web.UI.WebControls.Button Button1;
โมฆะส่วนตัว Page_Load (ผู้ส่งวัตถุ System.EventArgs e)
-
//ใส่รหัสผู้ใช้ที่นี่เพื่อเริ่มต้นเพจ
ถ้า(!IsPostBack)
-
Button1.Attributes.Add("onclick","hide()");
-
}
}