今天特想写一个基于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
}
25function closeModal()
26{
27 divModal.style.width="0px";
28 divModal.style.height="0px";
29 divModalDialog.style.display="none";
30 window.onresize=null;
31
32}
33function 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}
40function Button1_onclick()
41{
42 show();
43}
44function sf(res)
45{
46 success=res;
47}
下面是css的样式
1<style>
2div.titleBar{background: #CC66CC;margin: 0px auto;width: 100%;height: 21px;border: #0000FF solid 1px;}
3div.closeButton{float: right;}
4div.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 密码：
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文件了
1using System;
2using System.Data;
3using System.Configuration;
4using System.Collections;
5using System.Web;
6using System.Web.Security;
7using System.Web.UI;
8using System.Web.UI.WebControls;
9using System.Web.UI.WebControls.WebParts;
10using System.Web.UI.HtmlControls;
11using System.Data.SqlClient;
12namespace 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">给删了，果然成功了，但为什么删除我就不清楚了，呵呵呵！
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。