fancyBox简单入门

标签：

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>

fancyBox简单入门

标签：

原文地址：http://www.cnblogs.com/itliucheng/p/4378013.html