Js实现点击超链接弹出层，效果仿Discuz登录！

主要应用到的是dispaly:none 和 dispaly:block;来控制实现的；

<a id="link" href="#" onclick="linkonclick()">登录</a>这里还有一种写法

两种效果是一样的；

View Code

<!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>
    <style type="text/css">
        *
        {
            margin: 0px;
            padding: 0px;
        }
        body
        {
            background-image: url("../Images/Lv.gif");
            font-size: 12px;
        }
        body a
        {
            font-size: 100px;
            color: #FFF;
            text-decoration: none;
        }
        .login
        {
            background: #FFF;
            width: 560px;
            height: 360px;
            position: absolute;
            top: 310px;
            left: 510px;
            padding: 10px;
            z-index: 20;
            display: none;
        }
        .login ul
        {
            list-style: none;
            margin-left: 100px;
            margin-top: 50px;
        }

        .clear
        {
            background: #FFF;
            display: none;
            width: 600px;
            height: 400px;
            position: absolute;
            top: 300px;
            left: 500px;
            z-index: 10;
            filter: alpha(opacity=40);
            opacity: 0.4;
        }
    </style>
    <script type="text/javascript" language="javascript">
        function linkonclick() {
            var divs = document.getElementsByTagName("div");
            for (var i = 0; i < divs.length; i++) {
                var newdiv = divs[i];
                newdiv.style.display = "block";
            }
        }

        function btnclick() {
            var divs = document.getElementsByTagName("div");
            for (var i = 0; i < divs.length; i++) {
                var newdiv = divs[i];
                newdiv.style.display = "none";
            }
        }
    </script>
</head>
<body>
    <a id="link" href="#" onclick="linkonclick()">登录</a>
    <div class="login">
        <ul>
            <li>
                <p>
                    用户名:</p>
                <input id="Text1" type="text" />
            </li>
            <li>
                <p>
                    密  码:</p>
                <input id="Text2" type="text" />
            </li>
            <li>
                <input id="button" type="button" value="关闭" onclick="btnclick()" /></li>
        </ul>
    </div>
    <div class="clear">
    </div>
</body>
</html>