우리는 프로그램의 인간-컴퓨터 상호 작용에서 모달 창을 자주 사용하지만 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의 대화 상자가 하위 창에서 변경될 수 없음을 발견했습니다. 따라서 DIV의 표시를 제어하여 창의 모양이나 숨김을 제어할 수도 있습니다. . 하지만 DIV를 사용하여 창을 직접 표시하는 것은 어떨까요? 두 가지 이유가 있습니다. 1. DIV는 그 뒤에 있는 Dropdownlist 컨트롤을 차단할 수 없지만 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>웹폼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 ">
<스크립트 언어="자바스크립트">
함수 ShowLayer()
{
document.all.MyFormLayer.style.display='';
거짓을 반환;
}
함수 SetURL(url)
{
document.all.IFRAME1.src=url;
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="서버">
<FONT 얼굴="宋体">
<asp:DropDownList id="DropDownList1" style="Z-INDEX: 101; 왼쪽: 40px; 위치: 절대; 위쪽: 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: 없음;Z-INDEX: 103;LEFT: 16px;WIDTH: 408px;POSITION: 절대;TOP: 24px;HEIGHT: 304px">
<iframe scrolling="no"frameborder="0" width="100%" height="100%" id="IFRAME1" runat="서버">
</iframe>
</div>
<asp:Button id="Button2" style="Z-INDEX: 104; 왼쪽: 256px; 위치: 절대; TOP: 336px" runat="서버"
Text="ASPXTest"></asp:버튼>
</form>
</body>
</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)
{
//페이지를 초기화하려면 여기에 사용자 코드를 입력하세요.
if(!IsPostBack)
{
}
}
공개 정적 무효 CreateScript(System.Web.UI.Page mypage,string strScript,string ID)
{
문자열 strscript="<script 언어='javascript'>";
strscript += strscript;
strscript += "</script>";
if(!mypage.IsStartupScriptRegistered(ID))
mypage.RegisterStartupScript(ID, strscript);
}
개인 무효 Button2_Click(개체 전송자, System.EventArgs e)
{
IFRAME1.Attributes.Add("src","WebForm2.aspx?NAME='중국'");
CreateScript(페이지,"ShowLayer();","표시");
}
}
WebForm2.aspx
<%@ 페이지 언어="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="WSGUI1.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<헤드>
<title>웹폼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 ">
<스크립트 언어="자바스크립트">
함수 숨기기()
{
parent.MyFormLayer.style.display = "없음";
}
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form2" method="post" runat="서버">
<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>
</table>
</form>
</body>
</HTML>
WebFom2.aspx.cs
네임스페이스 WSGUI1
{
/// <요약>
/// WebForm2에 대한 요약 설명입니다.
/// </summary>
공개 클래스 WebForm2 : System.Web.UI.Page
{
보호된 System.Web.UI.WebControls.Button Button1;
개인 무효 Page_Load(개체 전송자, System.EventArgs e)
{
//페이지를 초기화하려면 여기에 사용자 코드를 입력하세요.
if(!IsPostBack)
{
Button1.Attributes.Add("onclick","hide()");
}
}
}