原生js模拟点击按钮弹出QQ登录框界面效果



172 684 229



特效描述:模拟点击按钮 弹出QQ登录框界面 弹出效果,(不提供演示)js进入页面点击弹出qq登录框一样的界面

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css">

2. HTML代码

    <div class="login">
        <a href="#"><img src="img/qq.png" alt="">&nbsp;QQ登陆</a>
    </div>
    <div id="mask" class="mask"></div>
    <div class="QQlogin" id="QQlogin">
        <aside></aside>
        <i class="close"></i>
        <div class="row down">
            <div class="col-xs-3 touxiang">
                <a href="#"></a>
                <dl>
                    <dt><a href="#"><span class="online"></span></a></dt>
                    <dd>
                        <a href="#"><span class="online"></span>我在线上</a>
                        <a href="#"><span class="callMe"></span>Q我吧</a>
                        <a href="#"><span class="away"></span>离开</a>
                        <a href="#"><span class="busy"></span>忙碌</a>
                        <a href="#"><span class="silent"></span>请勿打扰</a>
                        <a href="#"><span class="hid"></span>隐身</a>
                    </dd>
                </dl>
                <i class="people"></i>
            </div>
            <div class="col-xs-6 login-box">
                <input type="text" placeholder="QQ号码/手机/邮箱"><span class="first"></span>
                <input type="password" placeholder="密码"><span class="second" ></span>
                <label><input type="checkbox" class="three">&nbsp;记住密码</label>
                <label class="auto-login"><input type="checkbox" class="four">&nbsp;自动登录</label>
                <button class="btn">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
            </div>
            <div class="col-xs-3 register">
                <a href="#">注册账号</a>
                <a href="#" class="find-password">找回密码</a>
            </div>
        </div>
    </div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口提示框 切换按钮 form表单 提示框/弹出层 表单提交

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到