두 WEB 아래의 모달 대화 상자(asp.net 또는 js에서 별도로 구현됨)_javascript 기술

여기서는 두 개의 모달 대화 상자를 만드는 나만의 방법을 소개하거나 보여 드리겠습니다.

1
이 방법은 ASP.NET AJAX 확장 컨트롤을 사용하여 구현: ASP.NET AJAX 제어 도구 키트의 ModalPopupExtender 컨트롤:
첫 번째 단계에서는 먼저 ASP.NET 페이지를 만듭니다: ModalPopup.aspx
페이지 코드:

코드 복사 코드는 다음과 같습니다.

<%@ Page Language= "C#" AutoEventWireup ="true" CodeFile="AjaxControlToolkit.aspx.cs"
Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix ="cc1" %>



<제목> 제목>

< asp:LinkButton ID ="lbtn_Login" runat="server">Login
<%--패널의 표시 CSS 속성을 태그에 작성해야 합니다. --%>

사용자 이름:

비밀번호:

"
runat="server">

< /html>
[code]
백엔드 코드:
[code]
system.Collections.Generic 사용
>System.Web 사용;
System.Web.UI 사용;
System.Web.UI.WebControls 사용

공개 부분 클래스 _Default: System.Web.UI.Page

protected void Page_Load(객체 전송자, EventArgs e)
{

}
protected void Btn_Submit_Click(객체 전송자, EventArgs e)
{
if (this.UserName. Text.Trim ().ToUpper() == "JACKY" && this.Password.Text.Trim() == "123")
{
this.lbResult.Text = "로그인에 성공했습니다! ";
}
else
{
this.lbResult.Text = "로그인에 실패했습니다! ";
}
}

protected void Btn_Cancel_Click(객체 전송자, EventArgs e)
{
this.ModalPopupExtender1.Hide();
this.UserName.Text = "";
this.Password.Text = "";
this.lbResult.Text = ""
}
}


그렇습니다. pass 확장 컨트롤을 사용하면 모달 대화 상자 효과를 얻을 수 있습니다. 그런데 생각해보니 순수 JS로 구현하는 것이 더 쉬울 것 같아서 순수 JS로 구현했더니 금방 성공했습니다

방법 2
이번에는 HTML 페이지를 만듭니다: Popup.html
코드는 다음과 같습니다.




코드 복사

코드는 다음과 같습니다.

<머리>


<제목>

<본문>
登录

关闭

#好，自己更明确整个效果代码的流程。