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>

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

jquery简单实现点击弹出层效果实例
先看效果图: 完整例子:  <div id="race"><a href="#">点击</ ...
html页面点击小图弹出大图代码,利用JS实现点击小图弹出大图代码
特效描述:利用JS实现点击小图弹出大图代码.利用JS实现点击小图弹出大图代码代码结构 1. HTML代码 (function(){ var LightBox = function(options ...
非常漂亮的仿腾讯弹出层效果
2019独角兽企业重金招聘Python工程师标准>>> 非常漂亮的仿腾讯弹出层效果 http://www.jscode.cn/js/v45300 jquery弹出层插件-jquery ...
jQuery实现弹出层效果
###jQuery实现弹出层效果点击弹出层:弹出弹出层点击阴影:关闭弹出层点击"关闭"关闭弹出层整体代码如下: <!DOCTYPE html> <htm ...
CSSJS弹出层效果,兼容所有浏览器
直接上DEMO,不过IE中会提示加载ActiveX控件! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN&q ...
css外层DIV半透明内层div不透明-弹出层效果的实现
css外层DIV半透明内层div不透明-弹出层效果的实现 <!DOCTYPE html> <html><head><meta charset="ut ...
一个简单的遮罩弹出层效果
为什么80%的码农都做不了架构师?>>> 打酱油的日子就是要多学习下,最近在学写JS类库,虽然有面对对象语言的基础,但是感觉入手前端还是压力很大,就JS来说,干了半年了,水准还 ...
layui弹出层html,layui弹出层效果实现代码
本文实例为大家分享了layui弹出层的具体代码,供大家参考,具体内容如下弹出层大部分演示都在layer独立组件的官网,与内置的layer模块,用法是完全一致的特殊例子 Tips:为了更清晰演示, ...
点击超链接弹出QQ对话窗口
方法一: 点击https://shang.qq.com/v3/widget.html去开通QQ推广: 以上页面中步骤二的代码即是你需要的,如下:(核心就是href属性中的值) <a target ...

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

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

最新文章

热门文章