[原创推荐] 介绍两种WEB下的模态对话框的实现
两种WEB下的模态对话框
作者：Jacky.zhou
时间：2009/06/03
概述
在如今互联网网站上，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
<%@ 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_Login11
{
12
width: 230px;13
height: 180px;14
padding: 15px 15px 15px 15px;15
background-color: #fff;16
border: 2px solid #ccc;17
}18
.Password19
{20
margin-left: 15px;21
}22
.ModalPopupBackground23
{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
后台代码：
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Web;
5using System.Web.UI;
6using System.Web.UI.WebControls;
7
8public partial class _Default : System.Web.UI.Page
9{
10 protected void Page_Load(object sender, EventArgs e)
11 {
12
13 }
14 protected void Btn_Submit_Click(object sender, EventArgs e)
15 {
16 if (this.UserName.Text.Trim().ToUpper() == "JACKY" && this.Password.Text.Trim() == "123")
17 {
18 this.lbResult.Text = "登陆成功！";
19 }
20 else
21 {
22 this.lbResult.Text = "登录失败！";
23 }
24 }
25
26 protected void Btn_Cancel_Click(object sender, EventArgs e)
27 {
28 this.ModalPopupExtender1.Hide();
29 this.UserName.Text = "";
30 this.Password.Text = "";
31 this.lbResult.Text = "";
32 }
33}
34
using System;2
using System.Collections.Generic;3
using System.Linq;4
using System.Web;5
using System.Web.UI;6
using System.Web.UI.WebControls;7
8
public partial class _Default : System.Web.UI.Page 9
{10
protected void Page_Load(object sender, EventArgs e)11
{12
13
}14
protected void Btn_Submit_Click(object sender, EventArgs e)15
{16
if (this.UserName.Text.Trim().ToUpper() == "JACKY" && this.Password.Text.Trim() == "123")17
{18
this.lbResult.Text = "登陆成功！";19
}20
else21
{22
this.lbResult.Text = "登录失败！";23
}24
}25
26
protected void Btn_Cancel_Click(object sender, EventArgs e)27
{28
this.ModalPopupExtender1.Hide();29
this.UserName.Text = "";30
this.Password.Text = "";31
this.lbResult.Text = "";32
}33
}34
就这样，通过很简单的扩展控件就实现了模态对话框的效果，但是，我后来想了想，我感觉用纯JS来实现更简单些，所以，我用纯JS来实现了一次，很快成功了！
方法二
我们这次创建一个HTML页面：Popup.html
代码如下：
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4 <style type="text/css">
5 #loginContent
6 {
7 position: absolute;
8 left: 40%;
9 top: 30%;
10 width: 230px;
11 height: 180px;
12 padding: 15px 15px 15px 15px;
13 background-color: #fff;
14 border: 2px solid #ccc;
15 background-color: #fff;
16 z-index: 100;
17 display:none;
18 }
19 #hideContent
20 {
21 display:none;
22 position: absolute;
23 top: 0;
24 left: 0;
25 height: 100%;
26 width: 100%;
27 z-index: 50;
28 background-color: #dddddd;
29 filter: alpha(opacity=60)； /*IE*/ opacity:60; /*Firefox*/
30 }
31 </style>
32 <script type="text/javascript">
33 var hidecontent = document.getElementById("hideContent");
34 var logincontent = document.getElementById("loginContent");
35 function showModalPopup() {
36 hideContent.style.display = "block";
37 loginContent.style.display = "block";
38 }
39 function hideModalPopup() {
40 hideContent.style.display = "none";
41 loginContent.style.display = "none";
42 }
43 </script>
44 <title></title>
45</head>
46<body>
47 <a href="javascript:void(0);" onclick="showModalPopup();">登录</a>
48 <div id="loginContent">
49 <a href="javascript:void(0);" onclick="hideModalPopup();">关闭</a>
50 </div>
51 <div id="hideContent">
52 </div>
53</body>
54</html>
55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<style type="text/css">5
#loginContent6
{7
position: absolute;8
left: 40%;9
top: 30%;10
width: 230px;11
height: 180px;12
padding: 15px 15px 15px 15px;13
background-color: #fff;14
border: 2px solid #ccc;15
background-color: #fff;16
z-index: 100;17
display:none;18
}19
#hideContent20
{21
display:none;22
position: absolute;23
top: 0;24
left: 0;25
height: 100%;26
width: 100%;27
z-index: 50;28
background-color: #dddddd;29
filter: alpha(opacity=60)； /*IE*/ opacity:60; /*Firefox*/30
}31
</style>32
<script type="text/javascript">33
var hidecontent = document.getElementById("hideContent");34
var logincontent = document.getElementById("loginContent");35
function showModalPopup() {36
hideContent.style.display = "block";37
loginContent.style.display = "block";38
}39
function hideModalPopup() {40
hideContent.style.display = "none";41
loginContent.style.display = "none";42
}43
</script>44
<title></title>45
</head>46
<body>47
<a href="javascript:void(0);" onclick="showModalPopup();">登录</a>48
<div id="loginContent">49
<a href="javascript:void(0);" onclick="hideModalPopup();">关闭</a>50
</div>51
<div id="hideContent">52
</div>53
</body>54
</html>55
就这样，我用两种方式实现了前面展示的那样的效果，其实我自己感觉，用纯JS写效果比用控件写更好，自己更明确整个效果代码的流程。
