概述
在如今互联网网站上，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