1. 下载 fancyBox,解压后根据需要将文件复制到网页文件夹中(建议不要更改目录结构),并在网页源码中引入相应的 css 样式和 js 文件(如果更改了目录结构,引入的时候请调整相应代码,对应它们所在的路径)。
注意:别忘了还要先加载 jQuery 库!

<!-- 加载 jQuery 库(必须) -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- 引入 fancyBox 核心文件(必须)-->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

2. 给触发 fancyBox 特效的元素(如一张缩略图或“点击我”三个字)加上 a 链接,并将其 href 属性值设置为遮罩层中需要展示的文件的链接(如刚刚那张缩略图的原图的网址)。示例代码:

<a class="fancybox" rel="group" href="原图_1.jpg"><img src="缩略图_1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="原图_2.jpg"><img src="缩略图_2.jpg" alt="" /></a>

3. 使页面加载完毕时初始化 fancybox() 函数。示例代码:

<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
事例
比如我们做一个点击图片弹出一个form表单,首先让一个a标签包裹住这个图片
<a class="fancybox" rel="group" href="#yuyueform"><img src="/sta/img/1.gif" width="120px"></a>
href中是这个form表单的id属性
 
<form style="display:none" id="yuyueform" action="/yuyue/new.action" method="post">
<legend><h3>XX医院就诊预约信息核对</h3></legend>
<input type="hidden" name="yuyue.patient.id" value="${sessionScope.patient.id }">
<input type="hidden" name="yuyue.doctor.id" value="${doctor.id }">
<input type="hidden" name="yuyue.money" value="${doctor.role == '普通医师'?'2':'3' }">
<label>预约人:${sessionScope.patient.patientname }</label>
<label>诊断医生:${doctor.docname }</label>
<label>挂号金额:${doctor.role == '普通医师'?'2元':'3元' }</label>
<label>时间:</label>
<input type="text" id="yuyuetime" name="yuyue.yuyuetime">
<div class="form-actions">
<button class="btn btn-success" onclick="btnsubmit()">确认</button>
</div> </form>
05-08 14:51