文档介绍：div 弹出层, 我没有点击事件, 是页面一加载就弹出来, 你也可以改成$("#id").click(fun ction(){}); 放这里面就可以点击某个 id 事件来弹出层了,上预览图: 页面加载完成时: 当验证码得到焦点时: 实现这个 ajax 为了节约时间, 用户名/ 密码/ 验证码我都没判断是否为空, 我也没用数据库, 登录用户名和密码都是 admin 登录成功时: 这里说明一下, 由于时间有限, 你可以把这个登录成功或者登录失败, 效果做一下, 直接在登录窗口上放一个<div id="message"><div> 然后设置其样式,把提示内容追加上去,根据自己个人需求来,下面贴我的全部代码: 静态页面代码如下图所示: 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "ht tp:///xhtml1/DTD/xhtml1-" > 2<html xmlns ="9/xhtml"> 3<head >4<title >mydream_ 后台登录</title > 5<link href ="css/" rel ="stylesheet" type ="text/css" /> 6<script src ="../js/jquery--" type ="text/javascrip t"></ script >7<script src ="js/" type ="text/javascript"></ script > 8</head >9<body >10<div id="login" class ="login"> 11<div class ="title">< b>管理员登录</b></ div > 12<div class ="pad"> 13<div ><pclass ="selectinput loginpsw">< label >用户名:</label ><input type ="text" tabindex ="1" class ="txt" size ="36" name ="username" id="tx tName" /></ p></ div >14<div ><pclass ="selectinput loginpsw">< label >密&nbsp;&nbsp;&nbsp; 码:</label ><input type ="password" tabindex ="1" class ="txt" size ="36" name ="password" id="txtPassword" /></ p></ div > 15<div ><div ><pclass ="selectinput loginpsw">< label >验证码: </label >< input type ="text" tabindex ="1" class ="txt" size ="36" name ="code" id=" txtCode"/></ p></ div ></ div > 16<div ><input id="btnLogin" type ="button" value ="登录"/></ div > 17</div >18<div class ="divCode">< img alt ="验证码"title ="点击刷新验证码"src = "../ashx/" /></ div > 19</div >20</body >21</html > 层叠样式表代码如下所示: {margin-bottom :10px ;width :224px ;height :20px ;background -color :#FFF ;border :1px solid ;border-color :#999 #CCC #CCC #999 ;} .txt {float :left ;width :165px ;border :none ;} label {float :left ;display :inline ;margin :0004px ;width :5 0px ;height :auto ;line-height :150% ;color :#339900 } 4body,td,input,textarea,select,but