快捷導(dǎo)航

兩種WEB下的模態(tài)對話框（asp.net或js的分別實現(xiàn)）

更新時間：2009年12月02日 01:02:09 作者：

在如今互聯(lián)網(wǎng)網(wǎng)站上，AJAX效果風(fēng)靡一時，應(yīng)該說AJAX技術(shù)在未來幾年不會動搖，在AJAX效果中，模態(tài)對話框是比較常見的效果，也是非常適用的。

在這里我給大家介紹或者說是展示一下我自己的做的兩種模態(tài)對話框

方法一
本方法是采用ASP.NET AJAX的擴(kuò)展控件：ASP.NET AJAX Control Tool Kit中的ModalPopupExtender控件實現(xiàn)的：
第一步，我們先創(chuàng)建一個ASP.NET頁面:ModalPopup.aspx
頁面代碼：

復(fù)制代碼代碼如下:

 
<%@ 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"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<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> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
<asp:LinkButton ID="lbtn_Login" runat="server">登陸</asp:LinkButton> 
<%--panel的display的CSS屬性必須寫在標(biāo)簽里面。--%> 
<asp:Panel ID="p_Login" CssClass="p_Login" runat="server" Style="display: none;"> 
&nbsp;<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
<ContentTemplate> 
<p> 
用戶名：<asp:TextBox ID="UserName" runat="server"></asp:TextBox> 
</p> 
<p> 
密碼：<asp:TextBox ID="Password" runat="server" CssClass="Password" TextMode="Password"></asp:TextBox> 
</p> 
<p> 
<asp:Button ID="Btn_Submit" runat="server" Text="登錄" OnClick="Btn_Submit_Click" /> 
<asp:Button ID="Btn_Cancel" runat="server" Text="取消" 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> 
</html> 
[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 = "登陸成功！"; 
} 
else 
{ 
this.lbResult.Text = "登錄失?。?; 
} 
} 

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

就這樣，通過很簡單的擴(kuò)展控件就實現(xiàn)了模態(tài)對話框的效果，但是，我后來想了想，我感覺用純JS來實現(xiàn)更簡單些，所以，我用純JS來實現(xiàn)了一次，很快成功了！

方法二
我們這次創(chuàng)建一個HTML頁面：Popup.html
代碼如下：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<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> 
</head> 
<body> 
<a href="javascript:void(0);" onclick="showModalPopup();">登錄</a> 
<div id="loginContent"> 
<a href="javascript:void(0);" onclick="hideModalPopup();">關(guān)閉</a> 
</div> 
<div id="hideContent"> 
</div> 
</body> 
</html> 