弹出层与使用场景介绍
弹出层代码编写
html整体结构
<!--弹出层遮罩-->
<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>
css样式编写
/*弹出层遮罩*/
.layer-mask{
display: none;
z-index: 99999;
position: fixed;/*固定定位*/
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
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: #FFFFFF;
}
/*弹出层关闭按钮*/
.layer-close{
float: right;
width: 24px;
height: 24px;
border: 2px solid #FFFFFF;
text-align: center;
line-height: 25px;
border-radius: 50%;
background: #EEEEEE;
margin-right: -12px;
margin-top: -12px;
}
/*鼠标移动到按钮位置*/
.layer-close:hover{
cursor: pointer; /*鼠标小手*/
background: #CCCCCC;
color: #FFFFFF;
}
index.js
$(document).ready(function($) {
//登录链接事件
// $('#loginLink').click(function() {
//
// //显示弹出层遮罩
// $('#layer-mask').show(); //使用jQuery的show()方法让其显示
// //显示弹出层窗体
// $('#layer-pop').show();
// //弹出层关闭按钮绑定事件
// $('#layer-close').click(function() {
// //弹出层关闭
// $('#layer-mask').hide(); //使用jQuery的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 === 'imooc' && password === 'imooc') {
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 === 'imooc' && password === 'imooc' && 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();
}
});
完整Demo示例:
链接: https://pan.baidu.com/s/1pMpq9Ij 密码: tah2