-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-09-19
来源 ：
阅读 584
评论 0
摘要：本篇教程介绍了jQuery教程 登录弹出框实现详解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。
本篇教程介绍了jQuery教程 登录弹出框实现详解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。
<
类似百度的登录弹出框，可用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="//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;
}
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
