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

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

 1 < script language = javascript >
 2      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    login.Default3.login(username,userpwd,sf);
10    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    
32}
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的样式

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

 1 < body >
 2   
 3 < 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         密码： &nbsp;
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文件了

 1 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">给删了，果然成功了，但为什么删除我就不清楚了，呵呵呵！