首页 > 代码库 > div弹出登录窗口

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=http://www.mamicode.com/‘../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 = "http://www.mamicode.com/username=" + escape(username) + "&pwd=" + escape(pwd);        xmlHttp.send(data);    }</script><!-- 下面是写在html中的代码 --> <!-- 这个是你的登录按钮     --> <a href="http://www.mamicode.com/#" 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;"> &nbsp; &nbsp;                    <input type="button" id="BttLogin" value="http://www.mamicode.com/登录" onclick="Login();"/>                                    &nbsp;                   <input type="button"  id="BttCancel" value="http://www.mamicode.com/取消" onclick="ShowNo()"/>                </div>             </div>       </div>