弹出层使用场景：
注册
登陆
统一的消息提示框
减少页面跳转，刷新等一些操作
主要组成部分：
1遮罩层
2弹出窗口
这两个都是用div实现，jQuery动态控制隐藏显示
3对弹出层进行简单封装
4登陆表单简单校验
以mooc网为例：
<html>
<head>
<meta charset="utf-8">
<title>jquery弹出层</title>
<script type="text/javascript" src="../js/jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
<div class="header">
<div class="banner">
<img src="../images/003.png">
<span><a href="http://coding.imooc.com/">实战</a></span>
<span><a href="http://www.imooc.com/course/program">路径</a></span>
<span><a href="http://www.imooc.com/wenda">猿问</a></span>
<span><a href="http://www.imooc.com/article">手记</a></span>
</div>
<a id="loginLink" href="#">登录</a>
<a id="regeLink" href="#">注册</a>
</div>
<div class="swipe">
<div class="nav">
<div class="item">
<p class="title">前端开发</p>
<p>
<span>Html / Css</span>
<span>Javascript</span>
<span>Html5</span>
</p>
</div>
<div class="item">
<p class="title">后端开发</p>
<p>
<span>PHP / Nodejs</span>
<span>Java</span>
<span>C#</span>
</p>
</div>
<div class="item">
<p class="title">移动开发</p>
<p>
<span>Android</span>
<span>iOs</span>
<span>Cocos2d-x</span>
</p>
</div>
<div class="item">
<p class="title">数据处理</p>
<p>
<span>Mysql</span>
<span>Oracle</span>
<span>MongoDB</span>
</p>
</div>
</div>
<div class="ppt first"></div>
</div>
<div class="lessions">
<p class="title">❤ 热门课程</p>
<ul>
<li>
<img src="../images/004.jpg">
<p>JavaScript快速入门</p>
</li>
<li>
<img src="../images/005.jpg">
<p>玩转Photoshop</p>
</li>
<li>
<img src="../images/006.jpg">
<p>代码编写规范</p>
</li>
<li style="margin-right:0;">
<img src="../images/004.jpg">
<p>JavaScript快速入门</p>
</li>
<li>
<img src="../images/005.jpg">
<p>玩转Photoshop</p>
</li>
<li>
<img src="../images/006.jpg">
<p>代码编写规范</p>
</li>
<li>
<img src="../images/004.jpg">
<p>JavaScript快速入门</p>
</li>
<li style="margin-right:0;">
<img src="../images/005.jpg">
<p>玩转Photoshop</p>
</li>
</ul>
</div>
<div class="lessions">
<p class="title">☆ 最新发布</p>
<ul>
<li>
<img src="../images/004.jpg">
<p>JavaScript快速入门</p>
</li>
<li>
<img src="../images/005.jpg">
<p>玩转Photoshop</p>
</li>
<li>
<img src="../images/006.jpg">
<p>代码编写规范</p>
</li>
<li style="margin-right:0;">
<img src="../images/004.jpg">
<p>JavaScript快速入门</p>
</li>
<li>
<img src="../images/005.jpg">
<p>玩转Photoshop</p>
</li>
<li>
<img src="../images/006.jpg">
<p>代码编写规范</p>
</li>
<li>
<img src="../images/004.jpg">
<p>JavaScript快速入门</p>
</li>
<li style="margin-right:0;">
<img src="../images/005.jpg">
<p>玩转Photoshop</p>
</li>
</ul>
</div>
<div class="footer">
<div class="site">
<span>关于我们</span>
<span>人才招聘</span>
<span>讲师招募</span>
<span>联系我们</span>
<span>意见反馈</span>
<span>友情链接</span>
</div>
<div class="author">
© 2016 imooc.com 京ICP备13046642号
</div>
</div>
<!-- 弹出层遮罩 -->
<div id="layer-mask" class="layer-mask"></div>
<!-- 弹出层窗体 -->
<div id="layer-pop" class="layer-pop">
<!-- 弹出层关闭按钮 -->
<div id="layer-close" class="layer-close">×</div>
<!-- 弹出层内容区域 -->
<div id="layer-content" class="layer-content">
</div>
</div>
<!-- 登录窗体 -->
<div id="loginHtml" style="display:none;">
<!-- 登录窗体 -->
<div class="login">
<h4 class="title">登 录</h4>
<div class="item">
<label>账号</label>
<input id="username" class="input" name="username" type="text"/>
<p class="error-msg"></p>
</div>
<div class="item">
<label>密码</label>
<input id="password" class="input" name="password" type="password"/>
</div>
<div class="item">
<label> </label>
<input id="loginSubmitBtn" type="submit" class="submit" value="填写好了"/>
</div>
</div>
</div>
<!-- 注册窗体 -->
<div id="regeHtml" style="display:none;">
<!-- 注册窗体 -->
<div class="login">
<h4 class="title">注 册</h4>
<div class="item">
<label>账号</label>
<input id="username" class="input" name="username" type="text"/>
<p class="error-msg"></p>
</div>
<div class="item">
<label>密码</label>
<input id="password" class="input" name="password" type="password"/>
</div>
<div class="item">
<label>重复密码</label>
<input id="repassword" class="input" name="repassword" type="password"/>
</div>
<div class="item">
<label> </label>
<input id="regeSubmitBtn" type="submit" class="submit" value="填写好了"/>
</div>
</div>
</div>
</body>
</html>
CSS:
@charset "utf8";
*{margin:0;padding:0;}
body
{
text-align:center;
font: 14px/1.5 "微软雅黑",Verdana,Tahoma,Arial,sans-serif,"宋体";
line-height:30px;
}
ul,li
{
list-style:none;
}
/*弹出层遮罩*/
.layer-mask
{
display: none;
z-index: 99999;
position: fixed;
top : 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
}
/*弹出层窗体*/
.layer-pop
{
display: none;
z-index : 100000;
position: fixed;
top : 0;
left : 0;
right : 0;
bottom: 0;
margin: auto;
/*这样就会始终居中*/
width: 400px;
height: 300px;
background: #fff;
}
/*弹出层关闭按钮*/
.layer-close
{
float :right;
width: 24px;
height: 24px;
border: 3px solid #fff;
text-align: center;
line-height: 24px;
border-radius: 50%;
background: #eee;
margin-right: -12px;
margin-top:-12px;
}
.layer-close:hover
{
cursor: pointer;
background: #ccc;
color: #fff;
}
/*登录*/
.login
{
}
.login h4
{
font-size:20px;
line-height:50px;
}
.login label
{
margin-right: 5px;
color: #888;
display: inline-block;
width: 60px;
text-align: right;
}
.login .input
{
border:1px solid #ccc;
border-radius:3px;
padding:10px 5px;
width:250px;
}
.login .item
{
margin:20px auto;
}
.login .submit
{
background: #e40;
border:1px solid #e40;
border-radius:5px;
padding:10px 5px;
width:250px;
color:#fff;
}
.login .error-msg
{
color:#e40;
}
/*慕课网效果*/
/*顶部*/
.header
{
height:80px;
line-height:80px;
text-align : right;
margin: 0 20px;
overflow:hidden;
}
.header .banner
{
float:left;
}
.header .banner span
{
font-size:18px;
margin:0 15px;
line-height:80px;
}
.header .banner img
{
width:150px;
vertical-align: middle;
margin-right:40px;
}
.header a
{
color:#666;
text-decoration:none;
margin-left:20px;
}
/*轮播*/
.swipe
{
width: 1200px;
height: 450px;
margin : 0 auto;
overflow:hidden;
}
.swipe .ppt
{
width:100%;
height:100%;
}
.swipe .ppt.first
{
background:url(../images/001.jpg);
background-size: cover;
}
.swipe .ppt.second
{
background:url(../images/002.jpg);
background-size: cover;
}
/*导航*/
.nav
{
position:absolute;
width : 280px;
height:450px;
background: #000;
color:#fff;
filter:alpha(opacity=50); /*支持 IE 浏览器*/
-moz-opacity:0.50; /*支持 FireFox 浏览器*/
opacity:0.50; /*支持 Chrome, Opera, Safari 等浏览器*/
}
.nav .item
{
margin: 5px 20px;
padding: 10px;
text-align:left;
border-bottom:1px solid #aaa;
}
.nav .item:hover
{
background:#666;
cursor: pointer;
}
.nav .item .title
{
font-size:16px;
margin-bottom:10px;
}
.nav .item span
{
margin-right : 9px;
}
/*课程排列*/
.lessions
{
width : 1200px;
margin : 0 auto;
}
.lessions .title
{
text-align:left;
line-height : 45px;
color:#666;
font-size:16px;
margin-top:30px;
}
.lessions ul
{
overflow:hidden;
}
.lessions li
{
float : left;
width : 23%;
margin-right: 32px;
margin-top: 32px;
}
.lessions li img
{
max-width:100%;
}
/*页脚*/
.footer
{
margin-top:50px;
padding:50px 0;
background: #eee;
border-top : 1px solid #ddd;
}
.footer .site
{
line-height:100px;
}
.footer .site span
{
margin:0 20px;
color :#888;
}
JavaScript：
$(document).ready(function($){
// 登录链接事件
// $("#loginLink").click(function(){
// // 显示弹出层遮罩
// $("#layer-mask").show();
// // 显示弹出层窗体
// $("#layer-pop").show();
// // 弹出层关闭按钮绑定事件
// $("#layer-close").click(function(){
// // 弹出层关闭
// $("#layer-mask").hide();
// $("#layer-pop").hide();
// });
// });
// 登录链接事件
$("#loginLink").click(function(){
// 获取登录窗体代码
var loginHtml = $("#loginHtml").html();
showLayer(loginHtml,500,300,closeCallback);
// 登录表单校验
$("#loginSubmitBtn").click(function(){
var username = $("input[name='username']").val();
var password = $("input[name='password']").val();
if(username === 'zhengqian' && password === 'zhengqian'){
alert("登录成功");
}else{
$(".error-msg").html("账号或密码输入错误");
}
});
});
// 注册链接事件
$("#regeLink").click(function(){
// 获取注册窗体代码
var regeHtml = $("#regeHtml").html();
showLayer(regeHtml,500,350,closeCallback);
// 注册表单校验
$("#regeSubmitBtn").click(function(){
var username = $("input[name='username']").val();
var password = $("input[name='password']").val();
var repassword = $("input[name='repassword']").val();
if(username === 'zhengqian' && password === 'zhengqian' && repassword === password){
alert("注册成功");
}else{
$(".error-msg").html("账号或密码输入错误");
}
});
});
// 弹出层关闭回调函数
function closeCallback(){
$(".error-msg").html("");
}
// 显示弹出层
function showLayer(html,width,height,closeCallback){
// 显示弹出层遮罩
$("#layer-mask").show();
// 显示弹出层窗体
$("#layer-pop").show();
// 设置弹出层窗体样式
$("#layer-pop").css({
width : width,
height : height
});
// 填充弹出层窗体内容
$("#layer-content").html(html);
// 弹出层关闭按钮绑定事件
$("#layer-close").click(function(){
// 弹出层关闭
hideLayer();
// 关闭的回调函数
closeCallback();
});
}
// 隐藏弹出层
function hideLayer(){
// 弹出层关闭
$("#layer-mask").hide();
$("#layer-pop").hide();
}
});
我们去试一下吧，登陆输入zhengqian，账号密码即可登陆。
最新评论