动态控制层(显示登录层并在窗口居中)

最新推荐文章于 2020-03-13 23:04:17 发布

原创最新推荐文章于 2020-03-13 23:04:17 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

Javascript_层专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现动态登录框居中显示的方法。通过监听窗口大小变化调整登录框的位置，确保其始终处于屏幕中央。适用于不同浏览器环境。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动态控制层(显示登录层)</title>
    <script type="text/javascript">
        window.onresize = myCenter;

        function showLogin() {
            var div = document.getElementById("divMain");
            div.style.display = "block";
            myCenter();
        }
        function closeLogin() {
            var div = document.getElementById("divMain");
            div.style.display = "none";
        }
        function myCenter() {
            var odiv = document.getElementById("divMain");

            if (odiv.style.display == "block") {
                var sTop = document.documentElement.scrollTop || document.body.scrollTop;
                var cHeight = document.documentElement.clientHeight || document.body.clientHeight;
                var mid = (cHeight - odiv.offsetHeight) / 2;

                var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                var cWidth = document.documentElement.clientWidth || document.body.clientWidth;
                var mid2 = (cWidth - odiv.offsetWidth) / 2;

                if (navigator.appVersion.indexOf("MSIE 6") > -1) {
                    odiv.style.top = parseInt(sTop + mid) + "px";
                }
                else {
                    odiv.style.top = mid + "px";
                }

                if (navigator.appVersion.indexOf("MSIE 6") > -1) {
                    odiv.style.left = parseInt(sLeft + mid2) + "px";
                }
                else {
                    odiv.style.left = mid2 + "px";
                }
            }
        }
    </script>
</head>
<body>
    <a href="javascript:showLogin()">登录</a>
    <div id="divMain" style="position:absolute;top:0px;left:0px;display:none;background-color:Red;border-width:1px;">
        <img src="../images/close.JPG" onclick="closeLogin()" style="float:right;" /><br />
        <table>
            <tr>
                <td><label for="txtUserName">用户名称:</label></td>
                <td><input type="text" style="width:120px;" id="txtUserName" /></td>
            </tr>
            <tr>
                <td><label for="txtUserName">密码:</label></td>
                <td><input type="password" style="width:120px;" id="txtPassword" /></td>
            </tr>
        </table>
    </div>
</body>
</html>