概述
在如今互聯網網站上，AJAX效果風靡一時，應該說AJAX技術在未來幾年不會動搖，在AJAX效果中，模態對話框是比較常見的效果，也是非常適用的。在這裡我給大家介紹或者說是展示一下我自己的做的兩種模態對話框：
效果
方法一
本方法是采用ASP.NET AJAX的擴展控件：ASP.NET AJAX Control Tool Kit中的ModalPopupExtender控件實現的：
第一步，我們先創建一個ASP.NET頁面:ModalPopup.aspx
頁面代碼：
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxControlToolkit.aspx.cs"
2 Inherits="_Default" %>
3
4<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
5<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6<html xmlns="http://www.w3.org/1999/xhtml">
7<head runat="server">
8 <title></title>
9 <style type="text/css">
10 .p_Login
11 {}{
12 width: 230px;
13 height: 180px;
14 padding: 15px 15px 15px 15px;
15 background-color: #fff;
16 border: 2px solid #ccc;
17 }
18 .Password
19 {}{
20 margin-left: 15px;
21 }
22 .ModalPopupBackground
23 {}{
24 background-color:#dddddd;
25 filter:alpha(opacity=60)； /**//*IE*/
26 opacity:60; /**//*Firefox*/
27 }
28
29 </style>
30</head>
31<body>
32 <form id="form1" runat="server">
33 <div>
34 <asp:ScriptManager ID="ScriptManager1" runat="server">
35 </asp:ScriptManager>
36 <asp:LinkButton ID="lbtn_Login" runat="server">登陸</asp:LinkButton>
37 <%--panel的display的CSS屬性必須寫在標簽裡面。--%>
38 <asp:Panel ID="p_Login" CssClass="p_Login" runat="server" Style="display: none;">
39 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
40 <ContentTemplate>
41 <p>
42 用戶名：<asp:TextBox ID="UserName" runat="server"></asp:TextBox>
43 </p>
44 <p>
45 密碼：<asp:TextBox ID="Password" runat="server" CssClass="Password" TextMode="Password"></asp:TextBox>
46 </p>
47 <p>
48 <asp:Button ID="Btn_Submit" runat="server" Text="登錄" OnClick="Btn_Submit_Click" />
49 <asp:Button ID="Btn_Cancel" runat="server" Text="取消" OnClick="Btn_Cancel_Click" />
50 </p>
51 <p>
52 <asp:Label ID="lbResult" runat="server" Text=""></asp:Label>
53 <p>
54 </ContentTemplate>
55 </asp:UpdatePanel>
56 </asp:Panel>
57 <cc1:ModalPopupExtender ID="ModalPopupExtender1"
58 PopupControlID="p_Login"
59 TargetControlID="lbtn_Login"
60 BackgroundCssClass="ModalPopupBackground"
61 runat="server">
62 </cc1:ModalPopupExtender>
63 </div>
64 </form>
65</body>
66</html>
67
