Here, I'll introduce you to the two modal dialogs that I do.
Method One
This method is an extended control using asp.net ajax: asp.net the ModalPopupExtender control in the AJAX controls Tool Kit:
First, we first create a asp.net page: modalpopup.aspx
Page code:
Copy Code code as follows:
<%@ Page language= "C #" autoeventwireup= "true" codefile= "AjaxControlToolkit.aspx.cs"
inherits= "_default"%>
<%@ Register assembly= "AjaxControlToolkit" namespace= "AjaxControlToolkit" tagprefix= "CC1"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<style type= "Text/css" >
. p_login
{}{
width:230px;
height:180px;
padding:15px 15px 15px 15px;
Background-color: #fff;
border:2px solid #ccc;
}
. Password
{}{
margin-left:15px;
}
. Modalpopupbackground
{}{
Background-color: #dddddd;
Filter:alpha (opacity=60);/**//*ie*/
opacity:60; /**//*firefox*/
}
</style>
<body>
<form id= "Form1" runat= "Server" >
<div>
<asp:scriptmanager id= "ScriptManager1" runat= "Server" >
</asp:ScriptManager>
<asp:linkbutton id= "Lbtn_login" runat= "server" > Login </asp:LinkButton>
The CSS properties of the <%--panel display must be written in the tag. --%>
<asp:panel id= "P_login" cssclass= "P_login" runat= "Server" style= "Display:none"; >
<asp:updatepanel id= "UpdatePanel1" runat= "Server" >
<ContentTemplate>
<p>
User name: <asp:textbox id= "UserName" runat= "Server" ></asp:TextBox>
</p>
<p>
Password: <asp:textbox id= "Password" runat= "Server" cssclass= "Password" textmode= "Password" ></asp:TextBox>
</p>
<p>
<asp:button id= "Btn_submit" runat= "server" text= "login" onclick= "Btn_submit_click"/>
<asp:button id= "Btn_cancel" runat= "Server" text= "Cancel" onclick= "Btn_cancel_click"/>
</p>
<p>
<asp:label id= "Lbresult" runat= "Server" text= "" ></asp:Label>
<p>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<cc1:modalpopupextender id= "ModalPopupExtender1"
Popupcontrolid= "P_login"
Targetcontrolid= "Lbtn_login"
Backgroundcssclass= "Modalpopupbackground"
runat= "Server" >
</cc1:ModalPopupExtender>
</div>
</form>
</body>
[Code]
Background 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 = "Landing success!" ";
}
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 = "";
}
}
In this way, through a very simple extension of the control to achieve the modal dialog box effect, but, I later thought, I feel with pure JS to achieve simpler, so, I used to achieve a pure JS, and soon succeeded!
Method Two
We create an HTML page this time: popup.html
The code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<style type= "Text/css" >
#loginContent
{}{
Position:absolute;
left:40%;
top:30%;
width:230px;
height:180px;
padding:15px 15px 15px 15px;
Background-color: #fff;
border:2px solid #ccc;
Background-color: #fff;
z-index:100;
Display:none;
}
#hideContent
{}{
Display:none;
Position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:50;
Background-color: #dddddd;
Filter:alpha (opacity=60);/**//*ie*/opacity:60; /**//*firefox*/
}
</style>
<script type= "Text/javascript" >
var hidecontent = document.getElementById ("hidecontent");
var logincontent = document.getElementById ("logincontent");
function Showmodalpopup () {
HideContent.style.display = "block";
LoginContent.style.display = "block";
}
function Hidemodalpopup () {
HideContent.style.display = "None";
LoginContent.style.display = "None";
}
</script>
<title></title>
<body>
<a href= "javascript:void (0);" onclick= "Showmodalpopup ();" > Login </a>
<div id= "Logincontent" >
<a href= "javascript:void (0);" onclick= "Hidemodalpopup ();" > Close </a>
</div>
<div id= "Hidecontent" >
</div>
</body>
In this way, I used two ways to achieve the previous display of the effect, in fact, I feel, with a pure JS write effect than with the control to write better, oneself more clear the whole process of the effect code.
