Ajax.net+模态窗口的登陆简单例子

     今天特想写一个基于ajax.net的模态窗口的例子，但是中间出现了很多的问题，但统统被我拿下，呵呵呵！下面就让我写出我的成果吧。
     同样是使用的是AjaxPrio，有关设置的问题就不多说了，直接进入正题。
     先给出模态串口的代码；

var usename;
3

var userpwd;
4

var success;
5

function show()
6

{
7

username=document.getElementById("username").value;
8

userpwd=document.getElementById ("userpwd").value;
9

if(success)
11

{
12

document.getElementById("mainbb").innerText="登陆成功";
13

divModalDialog.style.display="block";
14

resizeModal();
15

window.onresize=resizeModal;
16

}
17

else
18

{
19

document.getElementById("mainbb").innerText="登陆失败";
20

divModalDialog.style.display="block";
21

resizeModal();
22

window.onresize=resizeModal;
23

}
24

}
25

function closeModal()
26

{
27

divModal.style.width="0px";
28

divModal.style.height="0px";
29

divModalDialog.style.display="none";
30

window.onresize=null;
31

}
33

function resizeModal()
34

{
35

divModal.style.width = document.body.scrollWidth;
36

divModal.style.height = document.body.scrollHeight;
37

divModalDialog.style.left = ((document.body.offsetWidth - divModalDialog.offsetWidth) / 2);
38

divModalDialog.style.top = ((document.body.offsetHeight - divModalDialog.offsetHeight) / 2);
39

}
40

function Button1_onclick()
41

{
42

show();
43

}
44

function sf(res)
45

{
46

success=res;
47

}

下面是css的样式

<style>
2

div.titleBar{background: #CC66CC;margin: 0px auto;width: 100%;height: 21px;border: #0000FF solid 1px;}
3

div.closeButton{float: right;}
4

div.mainBody{margin: auto;}
5

#divModalDialog{border:solid 1px;background:white;POSITION: absolute;left:0px;top:0px;DISPLAY: none;height:200px;WIDTH: 350px;overflow:hidden}
6

#divModal{BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:absolute; TOP: 0px;overflow:hidden}
7

</style>

下面是模态窗口的html

<body>
2

<DIV id="divModal" style="z-index: 100"></div>
4

<DIV id="divModalDialog" style="z-index: 101" >
5

<div class="titleBar">
6

<div class="closeButton"><a href="javascript:closeModal();">[关闭]</a></div>
7

</div>
8

<div class="mainBody" id="mainbb">
9

<div>
10

</DIV>
11

<form id="form1" runat=server >
12

用户名：<input id="username" type="text" /><br />
13

密码： 
14

<input id="userpwd" type="password" /><br />
15

<input id="Button1" type="button" value="登陆" language="javascript" onclick="return Button1_onclick()" />
16

</form>
17

</body>

然后就是cs文件了

using System;
2

using System.Data;
3

using System.Configuration;
4

using System.Collections;
5

using System.Web;
6

using System.Web.Security;
7

using System.Web.UI;
8

using System.Web.UI.WebControls;
9

using System.Web.UI.WebControls.WebParts;
10

using System.Web.UI.HtmlControls;
11

using System.Data.SqlClient;
12

namespace login
13

{
14

public partial class Default3 : System.Web.UI.Page
15

{
16

protected void Page_Load(object sender, EventArgs e)
17

{
18

AjaxPro.Utility.RegisterTypeForAjax(typeof(Default3));
19

}
20

[AjaxPro.AjaxMethod]
21

public bool login(string username, string userpwd)
22

{
23

SqlConnection con = new SqlConnection("server=.;database=testajax;uid=sa;pwd=lanjie");
24

con.Open();
25

SqlCommand com = new SqlCommand();
26

com.CommandText = "select * from userinfo where username=" + username + " and userpwd=" + userpwd;
27

com.Connection = con;
28

SqlDataReader da = com.ExecuteReader();
29

if (da.Read())
30

{
31

con.Close();
32

return true;
33

}
34

else
35

{
36

con.Close();
37

return false;
38

}
39

}
40

}
41

}
42

这基本上就是全部了，但需要注意的是，模态窗口在html页面是可以正常显示的，但在.net中却出现了问题，div的位置改变了，这个问题是我最头疼的问题，找了好多的资料都没找到答案，但突然有个念头闪过，就是把<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">给删了，果然成功了，但为什么删除我就不清楚了，呵呵呵！

posted on 2007-04-14 09:33 symjie 阅读(2001) 评论(7) 收藏举报