两种WEB下的模态对话框的实现-控件新闻-慧都网

两种WEB下的模态对话框的实现

原创|其它|编辑：郝浩|2009-06-04 10:21:05.000|阅读 523 次

概述：在如今互联网网站上，AJAX效果风靡一时，应该说AJAX技术在未来几年不会动摇，在AJAX效果中，模态对话框是比较常见的效果，也是非常适用的。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

概述

在如今互联网网站上，AJAX效果风靡一时，应该说AJAX技术在未来几年不会动摇，在AJAX效果中，模态对话框是比较常见的效果，也是非常适用的。在这里我给大家介绍或者说是展示一下我自己的做的两种模态对话框：

效果

方法一

本方法是采用ASP.NET AJAX的扩展控件：ASP.NET AJAX Control Tool Kit中的ModalPopupExtender控件实现的：

第一步，我们先创建一个ASP.NET页面:ModalPopup.aspx

页面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxControlToolkit.aspx.cs"
2

Inherits="_Default" %>
3

<%@ 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

.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

</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

后台代码：

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

public partial class _Default : System.Web.UI.Page
9

{
10

protected void Page_Load(object sender, EventArgs e)
11

{
12

}
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

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

代码如下：

<!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

#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

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写效果比用控件写更好，自己更明确整个效果代码的流程。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：博客园

上一篇：Sun推出面向PC用户的世界最大Java Store 下一篇：在Linq to Sql中管理并发更新时的冲突（3）：使用记录的时间戳进行检测

在线采购

中文文档库

试用/Demo下载

开发社群