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简单入门的更多相关文章

  1. 用IntelliJ IDEA创建Gradle项目简单入门

    Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...

  2. [原创]MYSQL的简单入门

    MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...

  3. Okio 1.9简单入门

    Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...

  4. emacs最简单入门,只要10分钟

    macs最简单入门,只要10分钟  windwiny @2013    无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...

  5. 【java开发系列】—— spring简单入门示例

    1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...

  6. Docker 简单入门

    Docker 简单入门 http://blog.csdn.net/samxx8/article/details/38946737

  7. Springmvc整合tiles框架简单入门示例(maven)

    Springmvc整合tiles框架简单入门示例(maven) 本教程基于Springmvc,spring mvc和maven怎么弄就不具体说了,这边就只简单说tiles框架的整合. 先贴上源码(免积 ...

  8. git简单入门

    git简单入门 标签(空格分隔): git git是作为程序员必备的技能.在这里就不去介绍版本控制和git产生的历史了. 首先看看常用的git命令: git init git add git comm ...

  9. 程序员,一起玩转GitHub版本控制,超简单入门教程 干货2

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...

随机推荐

  1. ForeignKey.on_delete

    当由一个 ForeignKey 引用的对象被删除,默认情况下,Django模拟SQL的 ON DELETE CASCADE 来删除对象的 ForeignKey 关系.这样可以覆盖指定的 on_dele ...

  2. 网上下载的“上下3D”和“左右3D”影片该如何播放?

    我们平常买的红蓝3D眼镜智能播放红蓝3D片源.网上找3D电影的时候,虽试图去找红蓝3D格式电影,但总会找到不少“左右格式”或者"上下格式"影片.正常播放后发现有两重画面.这种3D电 ...

  3. C# Windows Sockets (Winsock) 接口 (转)

    在.Net中,System.Net.Sockets 命名空间为需要严密控制网络访问的开发人员提供了 Windows Sockets (Winsock) 接口的托管实现.System.Net 命名空间中 ...

  4. PHP第一章学习——了解PHP(上)

    计划开启PHP学习教程,情况如下: 1.采用教程35章48个视频文件 2.时间4月29日-5月6日 共计8天 3.具体划分每天学习章节数不少于5个,预留5-6号时间为五一假期出玩情况 4.要求认真学习 ...

  5. HDU 4569 Special equations (数学题)

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=4569 题意:给你一个最高幂为4的一元多项式,让你求出一个x使其结果模p*p为0. 题解:f(x)%(p ...

  6. Git基础 1 ---- 版本控制系统的介绍

    1 Git 1 版本控制系统 vcs - version control system 2 版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统 3 版本控制系统的主要功能 1 ...

  7. ASP.NET常用内置对象

    ASP.NET 常用内置对象:Response对象.Request对象.Session对象.Server对象.Application对象 1.Response对象: (1) 用于向浏览器输出信息 常用 ...

  8. 【JAVA】使用Eclipse依赖生成jar包时,避免最外层同时生成资源文件的配置。

    使用Eclipse依赖生成jar包时,如果做配置,生成的jar包文件会全部生成在外面,这并不是我们需要的,下面我们一起来修改下配置,使生成的jar包符合我们的需求吧. 1.如果不做任何配置生成的jar ...

  9. [置顶] P2P之我见,关于打洞的学问-------开篇

    最近忙项目,有点累,无暇顾急博客,4月份本来想写写流媒体的文章,结果回家休了两个月回深圳后,接了P2P的项目,那就开始P2P吧. P2P起源于美国大学生Shawn Fanning 写的一个分享软件Na ...

  10. Python3 将configparser从ini文件中读取的内容转换成字典格式

    因为写脚本的用到了,所以研究了下怎么将configparser从ini文件中读取的内容转换成字典格式. 整理一下,希望能对大家有帮助. 从http://stackoverflow.com/questi ...