fancybox modal的完美解决(右上的X)

关于fancybox modal的完美解决(右上的X)，我们需要做以下两个步骤：

第一步：安装fancybox插件

在使用fancybox modal之前，我们需要将fancybox插件集成到我们的网页中。通过以下步骤安装：

1.下载fancybox

你可以在fancybox官方网站上下载fancybox插件。你需要下载的是fancybox的CSS和JS文件。

2.导入fancybox

把下载的CSS和JS文件分别导入到你的HTML中。示例代码如下：

<!--导入fancybox CSS文件-->
<link rel="stylesheet" href="path/to/fancybox.css">

<!--导入jQuery库-->
<script src="path/to/jquery.min.js"></script>

<!--导入fancybox JS文件-->
<script src="path/to/jquery.fancybox.min.js"></script>

3.初始化fancybox

在你的JS文件中初始化fancybox。示例代码如下：

$.fancybox.defaults.btnTpl.smallBtn =
    '<button data-fancybox-close class="fancybox-button fancybox-close-small" title="{{CLOSE}}">' +
    '<svg viewBox="0 0 40 40">' +
    '<path d="M10,10 L30,30 M30,10 L10,30" />' +
    '</svg>' +
    '</button>';

$('[data-fancybox]').fancybox({
    buttons: ['smallBtn'],
    animationEffect: "fade",
    transitionEffect: "fade",
    loop: true,
    protect: true
});

第二步：添加右上角的关闭按钮

1.修改fancybox模板

首先，在页面中找到fancybox模板。默认情况下，fancybox的模板长这样：

<div class="fancybox-container" role="dialog" tabindex="-1">
  <div class="fancybox-bg"></div>
  <div class="fancybox-inner">
    <div class="fancybox-stage"></div>
  </div>
</div>

在模板上添加一个关闭按钮。示例代码如下：

<div class="fancybox-container" role="dialog" tabindex="-1">
  <div class="fancybox-bg"></div>
  <div class="fancybox-inner">
    <div class="fancybox-close"></div> <!--这里添加一个关闭按钮-->
    <div class="fancybox-stage"></div>
  </div>
</div>

2.修改fancybox样式

在CSS文件中添加以下代码，修改关闭按钮的样式：

.fancybox-close {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  background: url("path/to/close.png") no-repeat; /*关闭按钮图片路径*/
  background-size: cover;
  z-index: 10001;
  cursor: pointer;
}

示例说明：

1. 示例1：通过调用$.fancybox.defaults.btnTpl.smallBtn来定义一个小的关闭按钮。并通过$('[data-fancybox]').fancybox()来初始化模板。
2. 编写fancybox模板时在.fancybox-inner标签中添加了一个.fancybox-close标签，并在CSS文件中修改样式来实现右上角的关闭按钮功能。

这就是fancybox modal的完美解决(右上的X)的攻略啦，希望对你有帮助。