一、什么是弹出层？
弹出层是指在网页上弹出的覆盖于原有页面内容之上的窗口，是一种常见的网页设计效果，用于弹窗提示、登录框等功能需求。通常情况下，点击页面上的某个按钮或链接可以触发弹出层的展示。
二、如何关闭弹出层？
在网页设计中，用户需要经常与弹出层进行交互，因此弹出层的关闭操作非常重要。下面提供两种常见的关闭方式：
1.使用JavaScript调用关闭方法
<script>
// 通过窗口对象 window 对象的 close() 方法可以关闭窗口。
window.close();
</script>
上面的代码是通过窗口对象的 close() 方法来关闭当前窗口。如果弹窗是通过 window.open() 方法打开的，则可以通过 window.opener 关闭弹窗来返回到原页面：
<script>
// 通过 window.opener 关闭弹窗，返回原页面
window.opener=null;
window.close();
</script>
2.使用jQuery调用关闭方法
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
// 通过 jQuery 绑定对应元素的 click 事件来关闭弹窗
$('#close-btn').click(function(){
window.parent.$('#pop-up-box').fadeOut(); //通过 window.parent 获取父窗口中的元素
});
</script>
上面的代码是通过绑定弹窗中关闭按钮的 click 事件来关闭弹窗，其中 window.parent.$('#pop-up-box') 是获取父窗口中的指定元素，通过 .fadeOut() 方法实现弹窗渐隐的效果。
三、代码示例
下面是完整的代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>关闭弹出层示例</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// 点击打开弹出层按钮
$('#open-btn').click(function(){
$('#pop-up-box').fadeIn(); // 显示弹出层
});
// 点击关闭弹出层按钮
$('#close-btn').click(function(){
window.parent.$('#pop-up-box').fadeOut(); // 通过 window.parent 获取父窗口中的元素
});
});
</script>
</head>
<body>
<p><a href="#" id="open-btn">打开弹出层</a></p>
<div id="pop-up-box" style="display:none">
<div><a href="#" id="close-btn">关闭</a></div>
<p>这里是弹出层的内容</p>
</div>
</body>
</html>
上面的代码实现了一个简单的弹出层效果，用户点击“打开弹出层”链接时，会出现一个弹出层，其中包含一个“关闭”链接，通过点击“关闭”链接可以关闭弹出层。
