利用js實現遮罩以及彈出可移動登錄窗口

本篇文章是對使用js實現遮罩以及彈出可移動登錄窗口的實現方法進行了詳細的分析介紹需要的朋友參考下復制代碼代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
    <title></title>
    <script type="text/javascript">
        function showLogin() {
            var loginDiv = documentgetElementById("loginDiv");
            var zhezhao = documentgetElementById("zhezhao");
            var clientx = documentdocumentElementclientWidth;
            var clienty = documentdocumentElementclientHeight;
            var l_margin = (clientx parseInt(loginDivstylewidth)) / ;
            var t_margin = (clienty parseInt(loginDivstyleheight)) /
            loginDivstyleleft = l_margin + "px";
            loginDivstyletop = t_margin +"px";
            loginDivstyledisplay = "block";
            zhezhaostyledisplay = "block";
        }
        function hidLogin() {
            var loginDiv = documentgetElementById("loginDiv");
            var zhezhao = documentgetElementById("zhezhao");
            loginDivstyledisplay = "none";
            zhezhaostyledisplay = "none";
        }
        function titleMove() {
            var moveable = true;
            var loginDiv = documentgetElementById("loginDiv");
            //以下變量提前設置好                        var clientX = windoweventclientX;
            var clientY = windoweventclientY;
            var moveTop = parseInt(loginDivstyletop);
            var moveLeft = parseInt(loginDivstyleleft);
            documentonmousemove = function MouseMove() {
                if (moveable) {
                    var y = moveTop + windoweventclientY clientY;
                    var x = moveLeft + windoweventclientX clientX;
                    if (x > && y > ) {
                        loginDivstyletop = y + "px";
                        loginDivstyleleft = x + "px";
                    }
                }
            }
            documentonmouseup = function Mouseup() {
                moveable = false;
            }
        }
    </script>
</head>
<body>
<!Main start zindex:>
<div id="Main" style="position:absolute;zindex:;">
<a href="javascript:showLogin()">登陸</a>
</div>
<!Main start zindex:>
<!loginDiv start :zindex:>
<div id="loginDiv" style="backgroundcolor:white;width:px;height:px;border:px solid blue;zindex:;display:none;position:absolute;bordertop:none">
    <div onmousedown="titleMove()" id="login_title" style="width:px;height:px;backgroundcolor:Blue;border:px solid silver;borderleft:none;borderright:none">
        <!<img src="/images/closejpg" style="float:right" onclick="hidLogin()"/>>
        <a href="javascript:hidLogin()" style="float:right;textdecoration:none;color:white;marginright:px;fontsize:px">×</a>
    </div>
    <table style="clear:right;width:px;height:px;textalign:right;margintop:px;">
        <tr><td>用戶名</td><td><input type="text" style="width:px;" /></td><td>  </td></tr>
        <tr><td>密碼:</td><td><input type="text" style="width:px;" /></td><td>  </td></tr>
        <tr><td><br /></td><td></td></tr>
    </table>
</div>
<!loginDiv end :zindex:>
<!zhezhao start: zindex:>
<div id="zhezhao" style="position:absolute;zindex:;width:%;height:%;backgroundcolor:silver;display:none;opacity:;">
<!zhezhao end>
</div>
</body>
</html>

　　
【效果】

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19925.html