div弹出登录窗口

<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="#" οnclick="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"  οnkeydοwn="if(event.keyCode==13) {Login();}" />
                </div>
               
                <br/>
                <div style="text-align:center;"> &nbsp; &nbsp;
                   <input type="button" id="BttLogin" value="登录" οnclick="Login();"/>
                  
                  &nbsp;
                  <input type="button"  id="BttCancel" value="取消" οnclick="ShowNo()"/>
                </div>
            </div>
      </div>

已经测试过了。好用。注意修改login方法以及其调用。呵呵。其余的都不用修改