div弹出登录窗口

<meta charset="utf-8"/>
<script  type="text/javascript">
//弹出式登录
function ShowNo()                        //隐藏两个层
{
document.getElementById("doing").style.display = "none";
document.getElementById("divLogin").style.display = "none";
}
function $(id) {
return (document.getElementById) ? document.getElementById(id) : document.all[id];
}
function showFloat()                    //根据屏幕的大小显示两个层
{
var range = getRange();
$('doing').style.width = range.width + "px";
$('doing').style.height = range.height + "px";
$('doing').style.display = "block";
document.getElementById("divLogin").style.display = "";
}
function getRange()                      //得到屏幕的大小
{
var top = document.body.scrollTop;
var left = document.body.scrollLeft;
var height = document.body.clientHeight;
var width = document.body.clientWidth;

if (top == 0 && left == 0 && height == 0 && width == 0) {
top = document.documentElement.scrollTop;
left = document.documentElement.scrollLeft;
height = document.documentElement.clientHeight;
width = document.documentElement.clientWidth;
}
return { top: top, left: left, height: height, width: width };
}
//这是自己写的登录方法，如果要用的话请注意修改这一块
function Login() {
var username = document.getElementById("txtUserName").value;
var pwd = document.getElementById("txtPwd").value;
if (username == "" || pwd == "") {
alert("请输入用户名或密码");
return;
}
var div = document.getElementById("userinfo");
var xmlHttp = GetXmlHttpObject();
//指定回调函数
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
m = xmlHttp.responseText;
if (m == "0") {
alert("用户名或密码不正确");
}
else {
Msg = m;
div.innerHTML = "<a href='../MusicSite/MemberCenter.aspx' target='_blank'>" + m + "</a>";
div.setAttribute("class", "mid");
ShowNo();

}
}
};
//初始化xmlhttprequst
xmlHttp.open("POST", "Login.aspx", true);
//设置头部
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送数据
var data = "username=" + escape(username) + "&pwd=" + escape(pwd);
xmlHttp.send(data);
}
</script>
<!-- 下面是写在html中的代码 -->
<!-- 这个是你的登录按钮     -->
<a href="#" onclick="showFloat()">登录</a>
<!--弹出式登录--->
<!--加一个半透明层-->
<div id="doing" style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;z-index:1000;position: absolute;left:0;top:0;display:none;overflow: hidden;">
</div>
<!--加一个登录层-->
<div id="divLogin" style="border:solid 10px #898989;background:#fff;padding:10px;width:400px;z-index:1001;height:200px; position: absolute; display:none;top:50%; left:50%;margin:-200px 0 0 -200px;">
<div style="padding:3px 15px 3px 15px;text-align:left;vertical-align:middle;" >
<div>
用户名：
<input type="text" style="border:1px solid #898989;height:20px;" id="txtUserName" />
<br />
密   码：
<input type="password" style="border:1px solid #898989;height:20px;margin-left:10px;" id="txtPwd"  onkeydown="if(event.keyCode==13) {Login();}" />
</div>

<br/>
<div style="text-align:center;">    
<input type="button" id="BttLogin" value="登录" onclick="Login();"/>

 
<input type="button"  id="BttCancel" value="取消" onclick="ShowNo()"/>
</div>
</div>
</div>