div彈出登入視窗

標籤：style   blog   http   java   color   os   

<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;"> &nbsp; &nbsp;                    <input type="button" id="BttLogin" value="登入" onclick="Login();"/>                                    &nbsp;                   <input type="button"  id="BttCancel" value="取消" onclick="ShowNo()"/>                </div>             </div>       </div>