Modal dialog boxes under two WEBs (implemented separately in asp.net or js)_javascript skills

Here I will introduce or show you my own method of making two modal dialog boxes

1
This method is implemented using the ASP.NET AJAX extension control: ModalPopupExtender control in the ASP.NET AJAX Control Tool Kit:
In the first step, we first create an ASP.NET page: ModalPopup.aspx
Page code:

Copy code The code is as follows:

<%@ 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
<%--The display CSS attribute of panel must be written in the tag. --%>

Username:

Password: < ;/asp:TextBox>

"
runat="server">

< /html>
[code]
Backend code:
[code]
using System;
using System.Collections.Generic;
using System.Linq;
using System .Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Btn_Submit_Click(object sender, EventArgs e)
{
if (this.UserName.Text.Trim ().ToUpper() == "JACKY" && this.Password.Text.Trim() == "123")
{
this.lbResult.Text = "Login successful! ";
}
else
{
this.lbResult.Text = "Login failed! ";
}
}

protected void Btn_Cancel_Click(object sender, EventArgs e)
{
this.ModalPopupExtender1.Hide();
this.UserName.Text = "";
this.Password.Text = "";
this.lbResult.Text = "";
}
}


That's it, it's easy to pass The extended control can achieve the effect of modal dialog box. However, after thinking about it, I felt that it would be easier to implement it with pure JS, so I implemented it with pure JS and it succeeded quickly
Method 2
This time we create an HTML page: Popup.html
The code is as follows:

Copy the code

The code is as follows:

登录

关闭

就这样，我用两种方式实现了前面展示的那样的效果，其实我自己感觉，用纯JS写效果比用控件写更好，自己更明确整个效果代码的流程。