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 };
    } 
    //这是自己写的登录方法,如果要用的话请注意修改这一块
    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;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;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;"> &nbsp; &nbsp; 
                   <input type="button" id="BttLogin" value="登录" onclick="Login();"/>
                  
                  &nbsp; 
                  <input type="button"  id="BttCancel" value="取消" onclick="ShowNo()"/>
                </div> 
            </div> 
      </div> 
原文地址:https://www.cnblogs.com/phpfensi/p/3853007.html