Justin's Words

jQuery 插件 fancybox 使用指南

Posted on | In |

fancybox 是一个能让页面弹出自定义窗口的 jQuery 插件，可以直接去它的 Github 主页看看。 本文只介绍该插件最常被用到的场合，即点击一个链接弹出自定义 <div> 窗口。

获取插件

通过 Git

1
$ git clone https://github.com/fancyapps/fancyBox.git

通过官方主页

提取必要代码文件到你的工程里

将以下文件提取到你工程里相应文件夹，通常图片文件放在 img/，js 文件放在 js/，css 文件放在 css/

提取文件完成后，jquery.fancybox.css 需要修改一下里面背景图片的链接以适应新的目录树，比如：

1
2
3
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('fancybox_sprite.png');
}

要改为：

1
2
3
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('../img/fancybox_sprite.png');
}

当然一切以你的目录结构为准。

部署代码

引入文件：

1
2
3
<link rel="stylesheet" href="css/jquery.fancybox.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.fancybox.js"></script>

HTML 代码示例：

1
2
3
4
5
<a href="#privacy" class="fancybox">Privacy</a>
<div id="privacy" style="display:none;">
    <h3>Lorem ipsum dolor sit amet.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis aliquid iusto quas, eius, nesciunt exercitationem minima ipsa culpa voluptatem voluptatum est ad optio, asperiores fuga consequuntur, sit hic similique veritatis?</p>
</div>

JavaScript 代码部署：

1
2
3
$(function{
    $('.fancybox').fancybox();
});

现在你预览页面点击 Privacy 已经可以看到效果了

自定义

去除 fancybox 预定的窗口的 padding，去除圆角：

1
2
3
4
.fancybox-skin {
    padding: 0 !important;
    border-radius: 0;
}

自定义 close 按钮，以下是个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.fancybox-close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #c00;
    text-align: center;
    color: #c00;
    line-height: 36px;
    word-break: break-all;
    text-decoration: none;
}
.fancybox-close::before {
    content: "X";
}

你可以对你需要弹出的 div 做修改以适应你的要求。

完成品

fancybox.PNG