用JQuery写出登录弹出框

最新推荐文章于 2024-08-06 10:37:21 发布

webnoob

最新推荐文章于 2024-08-06 10:37:21 发布

阅读量8.8k

点赞数 2

本文链接：https://blog.csdn.net/szu_aker/article/details/50792359

版权

类似百度的登录弹出框，可用jquery的fadeIn()，hide()，show()，slideDown()等动画函数实现，一下为html5

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="msty.css">
    <script src="jquery-2.2.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".btn_click").click(function(){
//                alert("hello");
                $(".box_bg").fadeIn(100);
                $(".box_lg").slideDown(200);
            });
            $(".close").click(function(){
                $(".box_bg").fadeOut(100);
                $(".box_lg").hide(100);
            })
        });
    </script>
</head>
<body>
    <div>
        <a class="btn btn-primary btn_click">百度登录框</a>
    </div>
    <div class="box_lg">
        <div class="box_tit">
            <a class="close" href="#">×</a>
            <h3>登录账号</h3>
        </div>

        <div class="box_cont">
            <form class="box_frm" action="http://www.baidu.com">
                <ol>
                    <li><input type="text" class="ipt" placeholder="学号"/></li>
                    <li><input type="text" class="ipt" placeholder="密码"/></li>
                    <li><input type="submit" value="登录" class="btn btn-primary btn_frm"></li>
                </ol>
            </form>
        </div>
        <div class="box_ft">
            <input type="checkbox" style="margin-right: 8px"><label>下次自动登录</label>
            <a href="#" >立即注册</a>
        </div>
    </div>
    <div class="box_bg"></div>
</body>
</html>

小结：为获取文档元素可以为该元素设置一个空类，由空类名称获取，如上面的获取.close；在写表单的时候可以放在<ol>和<ul>中，方便对齐格式；在写css时需要对一些东西进行预设，如下

*{
    padding: 0px;
    margin: 0px;
}
ol,ul{
    list-style:none;
}
a{
    text-decoration: none;
}
input,label{
    vertical-align: middle;
}

webnoob

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫