演示：Fancybox丰富的弹出层效果
Demo1：动态效果
Demo2：图片集，支持键盘方向键
Demo3：加载DIV，并固定在浏览器中央
加载本页中一个隐藏的DIV。
Demo4：Ajax加载数据
通过Ajax加载数据
Demo5：加载Iframe
加载嵌入百度首页
Demo6：加载FLASH影片
加载一个flash影片
Demo7：使用模式窗口
加载一个模式窗口
交互设计是一个过程，它不仅仅是画线框图。交互设计最关键的两个环节是页面流程和页面布局，前者建立清晰的架构和严密的逻辑，后者整合零散的信息并确定分明的主次关系。这一切都是为了我们的终极目标——让我们的界面符合用户的预期，不带给他们任何的意外。一切都在用户的意料之中。插件描述：fancyBox是一款优秀的弹出框Jquery插件。
特点1、允许我们用鼠标和键盘上的四个方向键切换图片2、可以根据当前窗口大小自动调整弹出框的大小，当我们改变浏览器窗口大小时，将会看到弹出框自动缩放了3、支持缩略图和按钮帮助导航4、弹出框支持显示多种类型的内容（图片，html，视频……）请下载demo中的文件（建议下载网盘中的，已经经过整理），查看index.html中的源代码，提取你想要的效果的js和html代码。
还可以参加参数列表进行自定义设置。
使用步骤1、下载插件并解压，复制文件并在你的页面中包含相关的脚本和样式文件，注意js和css文件的路径，（其实有些文件是可选的）&script&type=&text/javascript&&src=&../lib/jquery-1.8.2.min.js&&&/script&
&script&type=&text/javascript&&src=&../lib/jquery.mousewheel-3.0.6.pack.js&&&/script&
&script&type=&text/javascript&&src=&../source/jquery.fancybox.js?v=2.1.3&&&/script&
&link&rel=&stylesheet&&type=&text/css&&href=&../source/jquery.fancybox.css?v=2.1.2&&media=&screen&&
&link&rel=&stylesheet&&type=&text/css&href=&../source/helpers/jquery.fancybox-buttons.css?v=1.0.5&&
&script&type=&text/javascript&&src=&../source/helpers/jquery.fancybox-buttons.js?v=1.0.5&&&/script&
&link&rel=&stylesheet&&type=&text/css&href=&../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7&&
&script&type=&text/javascript&&src=&../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7&&&/script&
&script&type=&text/javascript&&src=&../source/helpers/jquery.fancybox-media.js?v=1.0.5&&&/script&2、创建包含有将要在fancyBox中打开的元素的路径的a标签，大家可以注意到，这里面包含了两张图片，一张小图和一张大图，如果嫌麻烦的话，完全可以设置成一张图片，只需要控制各自的大小即可。只不过这样会在一定程度上加大页面的负担。&a&class=&fancybox&&rel=&group&&href=&big_image_1.jpg&&&imgsrc=&small_image_1.jpg&&alt=&&&&/a&&&a&class=&fancybox&&rel=&group&href=&big_image_2.jpg&&&img&src=&small_image_2.jpg&&alt=&&&&/a&3、当页面文档被加载完毕后执行fancyBox函数&script&type=&text/javascript&&
&&&&$(document).ready(function&()&{
&&&&&&&&$(&&.fancybox&).fancybox();
参数列表（所有参数请参考官方文档）参数名 参数说明 可选值 默认值padding 图片距离弹出框的距离 整数或数组，如果是整数表示四个方向的内边距都为该整数，如果是数组则表示各个方向不同的值，表示为： [top, right, bottom, left] 15margin 弹出框距离浏览器四个方向的距离 整数或数组，如果是整数表示距离四个方向的距离都为该整数，如果是数组则表示各个方向不同的值，表示为： [top, right, bottom, left] 20width 当’auotoSize’设置为’false’时弹出框的宽度，仅适用于 iframe、swf、inline、ajax和html模式 数字或 ‘auto’ 800height 当’auotoSize’设置为’false’时弹出框的高度，仅适用于 iframe、swf、inline、ajax和html模式 数字或 ‘auto’ 600minWidth 弹出框的最小宽度 数字 100minHeight 弹出框的最小高度 数字 100maxWidth 弹出框的最大宽度 数字 9999maxHeight 弹出框的最大高度 数字 9999autoSize 自动调整高度，如果设置为ture,则要设置autoHeight和autoWidth为true true或false trueautoHeight 如果设置为true，那么ajax、inline、html模式下的弹出框将自动调整高度 true或false falseautoWidth 如果设置为true，那么ajax、inline、html模式下的弹出框将自动调整宽度 true或false falseautoResize 如果设置为true，当浏览器窗口大小改变的时候将自动调整弹出框大小 布尔值 !isTouchautoCenter 如果设置为true，那么弹出框总是居中的 布尔值 !isTouchfitToView 如果设置为true，弹出框将会在打开之前自动适应大小 布尔值 trueaspectRatio 如果设置为true，那么重置大小将会被图片的比例所影响 布尔值 falsetopRatio 弹出框距离顶部与距离底部的比例，如果为0.5，则表示居中 数字 0.5leftRatio 弹出框距离左边与距离右边的比例，如果为0.5，则表示居中 数字 0.5scrolling 添加到scrollbars滚动条上的样式 ‘auto’,'yes’,'no’,'visible’ ‘auto’wrapCSS 环绕元素的样式 字符串 arrows 如果设置为true，导航箭头将会被显示 布尔值 truecloseBtn 如果设置为true，将会显示“关闭”图标 布尔值 truecloseClick 如果设置为true，当用户点击内容的时候将会关闭弹出框 布尔值 falsenextClick 如果设置为true，当用户点击内容的时候将会导航到下一页 布尔值 falsemouseWheel 是否启用鼠标滚动切换 布尔值 trueautoPlay 是否自动播放弹出框的图片 布尔值 falseplaySpeed 播放毫秒速度 数字 3000preload 预加载的图片数 数字 3modal 如果设置为true，将会禁止导航和关闭 布尔值 falseloop 是否循环播放 布尔值 truescrollOutside 如果设置为true，将会视图避免垂直方向的滚动条，针对 iframe和html 布尔值 trueindex 重写开始的图片索引 数字 0type 重写内容的类型 ‘image’, ‘inline’, ‘ajax’, ‘iframe’, ‘swf’ 和 ‘html’ nullhref 重写内容的链接地址 字符串 nullcontent 重写被展示的内容 字符串 null
title 重写标题 字符串 null
相关插件-弹出层
讨论这个项目（9）回答他人问题或分享插件使用方法奖励jQ币
如何修改图片的大小让每一张图片都是相同的尺寸】
青空之南 0
为什么图片弹出后会页面会跳回顶层啊
&script&src=&js/jquery.js&&type=&text/javascript&&&/script&
&script&src=&js/public.js&&type=&text/javascript&&&/script&
&script&src=&js/jquery.SuperSlide.2.1.1.js&&type=&text/javascript&&&/script&
&script&src=&js/jquery-1.8.3.min.js&&type=&text/javascript&&&/script&
&script&src=&js/top.js&&type=&text/javascript&&&/script&
&link&rel=&stylesheet&&type=&text/css&&href=&css/mystyle.css&&
&script&src=&js/jquery.min.js&&type=&text/javascript&&&/script&
&script&src=&fancybox/jquery.mousewheel-3.0.4.pack.js&&type=&text/javascript&&&/script&
&script&id=&&&src=&fancybox/jquery.fancybox-1.3.4.pack.js&&type=&text/javascript&&&/script&
&link&media=&screen&&href=&fancybox/jquery.fancybox-1.3.4.css&&type=&text/css&&rel=&stylesheet&&我在页面中一共引入以上JS和相关的css，载入页面没问题，但是点击图片会报以下错误：& TypeError: t is undefined！！求解
你可以看看载入顺序跟你引入的js顺序是不是一样的
淋漓飒沓 0
引入的jquery在1.8.4以上（包含）的时候，没有弹出层，直接以链接形式跳转，这么解决？
microsoftvs1
在引用的jquery后面加入jQuery版本迁移辅助插件即可&script&src=&/jquery-migrate-1.2.1.min.js&&&/script&
下载了这个demo &直接打开html 没有问题 &发布在iis下 点击图片 不会弹出图片层 而是直接跳转到图片页 &不知道为什么
☆醉生の夢死♂ 0
这个可以在弹窗口的基础上再次弹出窗口吗？或者关闭当前弹出框，前面的弹出框还在。求赐教
layer可以/
PROMULGATOR
美国加利福尼亚
关注作者 (645)
收藏此插件 (151)
我当前jQ币余额：正在获取..
已下载次数：6821
所需jQ币：0问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
项目中用的是frameset三框架页面
用到fancybox，一个弹框插件，但是很无奈，弹框的大小会受到frame大小的限制，如下图：
请问如何让fancybox跳出框架大小的限制，显示略小于整个页面的大小？
下图是fancybox的参数配置：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这种问题看下文档就解决啦。
Default width for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto'.
Number, S Default value: 800height
Default height for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto'
Number, S Default value: 600意思就是如果在iframe内的话，可以将autosize设置为false，然后通过width和height设定大小。
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App拒绝访问 | www.weste.net | 百度云加速
请打开cookies.
此网站 (www.weste.net) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(6a6628-ua98).
重新安装浏览器，或使用别的浏览器