首页 / JQUERY / 如何用JQuery写出登录弹出框

如何用JQuery写出登录弹出框

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了如何用JQuery写出登录弹出框，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1659字，纯文字阅读大概需要3分钟。

内容图文

类似百度的登录弹出框，可用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>  
    <p>  
        <a class="btn btn-primary btn_click">百度登录框</a>  
    </p>  
    <p class="box_lg">  
        <p class="box_tit">  
            <a class="close" href="#">×</a>  
            <h3>登录账号</h3>  
        </p>  
  
        <p 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>  
        </p>  
        <p class="box_ft">  
            <input type="checkbox" style="margin-right: 8px"><label>下次自动登录</label>  
            <a href="#" >立即注册</a>  
        </p>  
    </p>  
    <p class="box_bg"></p>  
    </body>  
    </html>

如何用JQuery写出登录弹出框 - 文章图片

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


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

以上就是如何用JQuery写出登录弹出框 的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的如何用JQuery写出登录弹出框全部内容，希望文章能够帮你解决如何用JQuery写出登录弹出框所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/298005.html

来源：【匿名】