弹出层是很多网站都会用到的效果,接下来用实现弹出层函数封装:
(一)先看页面效果:
1. header 顶部导航条最右侧放登陆、注册两个链接
2.点击登陆链接时,弹出登陆窗体
3.点击右侧关闭按钮,登陆窗体关闭
4.点击注册链接时,弹出注册窗体
5.点击右侧关闭按钮,注册窗体关闭
(二)html结构(为简略,结构已省略logo、nav、登录注册等具体内容):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出层</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- 顶部导航栏 -->
<header>
<a href="#" id="loginLink">登录</a>
<a href="#" id="regeLink">注册</a>
</header>
<!-- 弹出层遮罩-->
<div class="layer-mask" id="layer-mask"></div>
<!-- 弹出层窗体-->
<div class="layer-pop" id="layer-pop">
<!-- 关闭按钮 -->
<div class="layer-close" id="layer-close">×</div>
<!-- 内容区域 -->
<div class="layer-content" id="layer-content"></div>
</div>
<!-- 登陆窗体 -->
<div class="loginHtml" id="loginHtml" style="display: none;">
<p style="text-align: center;color: #f00;">这是登陆窗体内容</p>
</div>
<!-- 注册窗体 -->
<div class="regeHtml" id="regeHtml" style="display: none;">
<p style="text-align: center;color: #f00;">这是注册窗体内容</p>
</div>
</body>
</html>
(三)简单CSS样式
/*头部样式*/
header{
width: 1200px;
height: 80px;
line-height: 80px;
text-align: right;
margin: 0 20px 0 25px;
overflow: hidden;
border: 1px #333 solid;
}
header a{
margin-left: 20px;
margin-right: 20px;
}
/*弹出层遮罩*/
.layer-mask {
display: none;
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
}
/*弹出层窗体*/
.layer-pop {
display: none;
z-index: 1000;
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;
line-height: 20px;
text-align: center;
border-radius: 50%;
background: #eee;
border: 3px solid #fff;
margin-right: -12px;
margin-top: -12px;
}
.layer-close:hover {
cursor: pointer;
background: #ccc;
color: #fff;
}
(四)jQuery脚本
$(document).ready(function($){
// 登陆链接事件
$("#loginLink").click(function(){
//获取登陆窗体代码
var loginHtml = $("#loginHtml").html();
showLayer(loginHtml,500,300);
});
// 注册链接事件
$("#regeLink").click(function(){
//获取注册窗体代码
var regeHtml = $("#regeHtml").html();
showLayer(regeHtml,500,300);
});
// 封装显示弹出层函数
function showLayer(html,width,height,closeCallback){
$("#layer-mask").show();
$("#layer-pop").show();
//动态设置弹出层宽度高度
$("#layer-pop").css({
width: width,
height: height
});
//填充弹出层窗体内容
$("#layer-content").html(html);
//绑定事件,调用hideLayer
$("#layer-close").click(function(){
hideLayer();
});
};
// 封装隐藏弹出层函数
function hideLayer(){
$("#layer-mask").hide();
$("#layer-pop").hide();
};
});