fancybox 的使用

实现web 页面弹出层，以前用的是colorbox，现在新项目准备用更绚丽的fancybox。

其实fancybox官网写的很明白，也很详细，简单的使用就不介绍了，大家可以去看官网的帮助文档。

地址：http://fancyapps.com/fancybox/

我这里记录一下，遇到的问题。首先，我用到了显示图片，这个很简单，还有就是显示iframe，最后我想显示一个div，div里面是组织结构树

这个fancybox没有说明如何显示。

最后是这样解决的：

<button id="trigger_tree" href="#treeDiv" style="">弹出框</button><div style="display:none;"><div id="treeDiv" class="popupDiv"><div class="toolBar"><button type="button" id="submit" class="btControls bt_complete">确定</button></div><ul id="dataTree" class="ztree"></ul></div>

$(function(){$('#trigger_tree').fancybox({padding : 0,autoSize:true,});
});

大家注意到了吗，button的href属性，指定连接的是div，这样就能显示了！

对了可能大家下载完插件，放入工程内发现显示的遮罩没有颜色，是需要修改他的css样式的。

fancybox 的使用相关推荐

基于 gulp 的 fancybox 源码压缩
前不久,处理生信分析的网页版自动化报告时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp ...
fancybox 在打开窗口前先执行 js脚本,fancybox设置只能通过右上角关闭,fancybox遮罩层关闭...
在默认情况下,fancybox点击之后弹出窗口,右上角带有一个XX,但是点击窗口的其他遮罩层或者是其他地方,都是可以关闭fancybox的,有些时候,我们不希望这样关闭,而是只能点击右上角关闭,那么设 ...
jquery Fancybox插件的应用
Fancybox是一款基于jquery的对图片展示播放的插件,当然,它html文本.flash动画.iframe以及ajax也予以支持.还可以通过css自定义外观,阴影效果超级赞! 演示效果:http ...
Jekyll添加FancyBox 插件
一.简要这是之前在GitHub Page上面使用博客功能的完善,之前每次传到GitHub上面的图片在博客里面都是显示压缩后的,导致很多代码细节都看不清. Markdown 语法中的图片我们一般是如此 ...
fancybox关闭弹出窗体parent.$.fancybox.close();
fancybox弹出窗体右上角会自带一个关闭窗体,而且点击遮罩层也会关闭fancybox 有时我们不须要这样进行关闭,隐藏关闭窗体,而且遮罩层不可点击在弹出窗体页面加一链接进行关闭使用parent ...
JS~重写alter与confirm，让它们变成fancybox风格
插件与系统命令对于很多JS弹框插件来说,都提供了alter,confirm等功能,如fancybox,Boxy等插件,今天来介绍一下如何将系统的alter和confirm替换成指定插件的alter和 ...
让博客园博客中的图片支持fancybox浏览
我给博客中的图片设置了最大宽度,如果有大点的图片内容会模糊. 所以想实现点击图片可弹窗浏览.还好博客园支持自定义js和css.这样我们可以引入fancybox插件. 实现: 1. 进到配置页面http ...
angular中封装fancyBox(图片预览)
首先在官网下载最新版的fancyBox(一定要去最新网站,以前依赖的jquery版本偏低),附上链接:http://fancyapps.com/fancybox/3/ 然后在项目中引用jquery,然 ...
fancybox去除不受待见的水平滚动条
用fancybox在嵌套某个页面时,有时莫名其妙的会出现的消除不掉的幽灵般水平滚动条,如何去除: github上的解决方案:https://github.com/fancyapps/fancyBox/ ...
jquery Fancybox使用教程
jquery Fancybox使用教程 Fancybox是一款基于jquery的对图片展示播放的插件,当然,它html文本.flash动画.iframe以及ajax也予以支持.还可以通过css自定义外 ...

fancybox 的使用

fancybox 的使用相关推荐

最新文章

热门文章