📅 最后修改于: 2023-12-03 15:01:22.423000 🧑 作者: Mango
在开发网页时，我们可能需要在页面内嵌入别的页面或资源。这时候，iframe标签就会派上用场。而Fancybox则是比较常用的弹出层插件，可以让我们在嵌入iframe的同时实现弹窗效果。本文将介绍如何在Fancybox中添加关闭按钮，以及相关的代码实现。
默认情况下，在Fancybox弹窗中是没有关闭按钮的。为了让用户可以方便地关闭弹窗，我们需要在代码中添加相应的元素和事件。具体来说，可以在弹窗的头部添加一个“关闭”按钮，当用户点击该按钮时，弹窗就会被关闭。
<a class="close-btn" href="javascript:;"></a>
<script>
$(".close-btn").click(function() {
parent.jQuery.fancybox.close(); // 关闭弹窗
});
</script>
在上述代码中，我们首先添加了一个class为“close-btn”的超链接标签，该标签内没有文字内容。接下来，我们使用jQuery为该标签绑定了一个click事件，当用户点击该按钮时，就会执行对应的回调函数。在回调函数中，我们调用Fancybox提供的close()方法，将当前弹窗关闭。
为了方便大家理解，下面给出了一个完整的示例代码，该代码可以实现在Fancybox弹窗中添加关闭按钮的效果。
<!DOCTYPE html>
<html>
<head>
<title>iframe上的Fancybox关闭按钮示例</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
</head>
<body>
<!-- 弹窗内容 -->
<div id="modal" style="display: none;">
<a class="close-btn" href="javascript:;"></a>
<h1>Hello World!</h1>
<p>这是一个弹窗示例</p>
</div>
<!-- 触发弹窗的按钮 -->
<button class="open-modal">打开弹窗</button>
<script>
$(document).ready(function() {
// 触发弹窗事件
$(".open-modal").click(function() {
$.fancybox.open({
src: "#modal", // 弹窗内容对应的选择器
type: "inline",
smallBtn: false, // 隐藏默认的关闭按钮
toolbar: false, // 隐藏工具栏
clickOutside: "close" // 点击弹窗外部区域时关闭弹窗
});
});
// 绑定关闭按钮的事件
$(".close-btn").click(function() {
parent.jQuery.fancybox.close();
});
});
</script>
</body>
</html>
在上述代码中，我们首先定义了一个id为“modal”的div，该div中包含了一个“关闭”按钮和一些随意的内容。接着，我们定义了一个按钮，当用户点击该按钮时就会触发弹窗事件。在弹窗事件中，我们使用Fancybox的open()方法展示了一个模态弹窗，并指定了对应的内容选择器。需要注意的是，我们在此处隐藏了默认的关闭按钮和工具栏，并设置了点击弹窗外部区域时自动关闭弹窗。最后，在代码中绑定了关闭按钮的click事件，以实现“一键关闭”效果。
总的来说，在Fancybox弹窗中添加关闭按钮是比较简单的，我们只需要为按钮绑定一个click事件，并在回调函数中调用Fancybox提供的close()方法即可。在实际的开发中，我们可以根据自己的实际需求进行适当的修改和拓展，从而实现更多更有趣的效果。