在很多论坛或博客上看到他们的登录框都是点击登录后弹出来的，觉得这效果挺不错，页面不刷新就可登录，是实现Ajax登录的第一步了，今天手热想写下这个第一步，用JS CSS 共同实现一个可拖动div弹出层效果，在这个层内布局上用户名、密码等登录内容，设置有关闭按钮，随时可关闭弹出框，下面请跟随教程一步步实现。
我们先定义一下CSS文件：
body,#Mdown{margin: 0;padding: 0;text-align: center;font: normal 14px/180% Tahoma,sans-serif;}
#loginBox{margin: 0 auto;padding: 0px;text-align: left;width: 280px;height: 150px;background: #EAEEFF;font-size: 9pt;border: 1px solid #829AFF;overflow: hidden;filter: alpha(opacity=90);opacity: 1;}
#loginBox .title{text-align: left;padding-left: 10px;font-size: 11pt;border-bottom: 1px solid #829AFF;height: 25px;line-height: 25px;cursor: move;}
#loginBox .t1{float: left;font-weight: bold;color: #AA7B7B;text-decoration: none;}
#loginBox .t2{float: right;text-align: center;line-height: 18px;height: 18px;width: 18px;margin-top: 3px;margin-right: 2px;overflow: hidden;border: 1px solid #FF5889;background: #FFE0E9;cursor: pointer;}
#loginBox .login{text-align: center;width: 100%;height: 100%;}
input.submit{float: right;border: 1px solid #829AFF;FONT-SIZE: 9px;background: #EAEEFF;HEIGHT: 20px;margin-top: 5px;margin-right: 70px;}
#bgDiv{width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;right: 0px;background-color: #777;opacity: 0.7;}这个文件可以保存为css.css，用的时候这样：
<link href="css.css" rel="stylesheet" type="text/css" /><br type="_moz" data-filtered="filtered">
为了实现点击“登录”后，弹出登录框，我们加入以下JavaScript代码：
<script type="text/javascript">
var IsMousedown, LEFT, TOP, login;
document.getElementById("Mdown").onmousedown = function(e) {
login = document.getElementById("loginBox");
IsMousedown = true;
e = e || event;
LEFT = e.clientX - parseInt(login.style.left);
TOP = e.clientY - parseInt(login.style.top);
document.onmousemove = function(e) {
e = e || event;
if (IsMousedown) {
login.style.left = e.clientX - LEFT + "px";
login.style.top = e.clientY - TOP + "px";
}
}
document.onmouseup = function() {
IsMousedown = false;
}
}
</SCRIPT>将上述JS代码保存为ajaxlogin.js文件，供下一步调用。下面来看完整的HTML代码：
<html> <head> <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title>弹出窗口登录效果</title> <link href="css.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="ajaxlogin.js"></SCRIPT> </head> <body> <div id="bgDiv" style="display:none;"></div> <a href="javascript:" onClick="bgDiv.style.display='';loginBox.style.display='';">登录</a> <div id="loginBox" style="position:absolute; left:367px; top:150px; z-index:1;display: none;" > <div class="title" id="Mdown"> <span class="t1">登录</span> <span class="t2" title="关闭" onClick="login.style.display='none';bgDiv.style.display='none'">X</span> </div> <div class="login"> <form method="post" action="#"> <table> <tr> <td>用户名:</td><td><input type="text"name="username" size="12" maxlength="10"></td> </tr> <tr> <td>密 码:</td><td><input type="text"name="password" size="12" maxlength="10"></td> </tr> <tr> <td></td><td><button class="submit" type="submit">登陆</button></td> </tr> </table> </form> </div> </div> </body> </html>
本弹出框支持拖动，支持关闭，最后的运行效果：
