又发现一款好用的popup插件(jquery.fancybox.js)

来源：互联网发布：js escape html 编辑：程序博客网时间：2024/05/16 05:51

由于在项目中,遇到一个场景,就是用户填写的认证信息中,有一个关于扫描件的图片,由于页面太小的原因,无法让审核人员看清楚图片的详情,一开始的思路是,在点击图片的时候,获取到图片的src,然后通过悬浮一个div出来.把选中的图片放大...这是一种办法.也实现了,但是不是很美观..后经同时推荐,发现了这款插件fancybox.

以下摘自:http://www.php100.com/html/program/jquery/2013/0905/5951.html

FancyBox是jquery一款不错的弹出窗口插件,下面我来给各位同介绍介绍有需要了解的同学可参考。

FancyBox使用方法：

1、引入jquery核心库和Fancybox插件库

以下为先关的可选部分插件

2.关于图片上的使用

3.关于普通文本的使用

        <a id="inline" href="#data">This shows content of element who has id="data"</a>
        <div style="display: none;">
      <div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>

4.关于iframe的使用

<a href="http://www.example?iframe">This goes to iframe</a> or

<a class="iframe" href="http://www.example">This goes to iframe</a>

5.关于ajax是使用

<a href="http://www.example/data.php">This takes content using ajax</a>

6.关于一组图片.我们可以使用rel来创建相册轮播效果

================================================================================

以下为js部分的使用

$(".grouped_elements").fancybox();
});
</script>

Fancybox的API和配置选项说明

属性名默认值简要说明padding10浏览框内边距，和css中的padding一个意思margin20浏览框外边距，和css中的margin一个意思opacityfalse如果为true，则fancybox在动画改变的时候透明度可以跟着改变modalfalse如果为true，则’overlayShow’ 会被设成 ‘true’ ， ‘hideOnOverlayClick’, ‘hideOnContentClick’, ‘enableEscapeButton’, ‘showCloseButton’ 会被设成 ‘false’cyclicfalse如果为true，相册会循环播放scrolling‘auto’设置overflow的值来创建或隐藏滚动条，可以设置成 ‘auto’, ‘yes’, or ‘no’width560设置iframe和swf的宽度，如果 ‘autoDimensions’为 ‘false’，这也可以设置普通文本的宽度height340设置iframe和swf的高度，如果 ‘autoDimensions’为 ‘false’，这也可以设置普通文本的高度autoScaletrue如果为true，fancybox可以自适应浏览器窗口大小autoDimensionstrue在内联文本和ajax中，设置是否动态调整元素的尺寸，如果为true，请确保你已经为元素设置了尺寸大小centerOnScrollfalse如果为true，当你滚动滚动条时，fancybox将会一直停留在浏览器中心ajax{ }和jquery的ajax调用选项一样

注意: ‘error’ and ‘success’ 这两个回调事件会被fancybox重写swf{wmode: ‘transparent’}swf的设置选项hideOnOverlayClicktrue如果为true则点击遮罩层关闭fancyboxhideOnContentClickfalse如果为true则点击播放内容关闭fancyboxoverlayShowtrue如果为true，则显示遮罩层overlayOpacity0.3遮罩层的透明度（范围0-1）overlayColor‘#666′遮罩层的背景颜色titleShowtrue如果为true，则显示标题titlePosition‘outside’设置标题显示的位置.可以设置成 ‘outside’, ‘inside’ 或 ‘over’titleFormatnull可以自定义标题的格式transitionIn, transitionOut‘fade’设置动画效果. 可以设置为 ‘elastic’, ‘fade’ 或 ‘none’speedIn, speedOut300fade 和 elastic 动画切换的时间间隔, 以毫秒为单位

changeSpeed300切换时fancybox尺寸的变化时间间隔（即变化的速度），以毫秒为单位changeFade‘fast’切换时内容淡入淡出的时间间隔（即变化的速度）easingIn, easingOut‘swing’为 elastic 动画使用 EasingshowCloseButtontrue如果为true，则显示关闭按钮showNavArrowstrue如果为true，则显示上一张下一张导航箭头enableEscapeButtontrue如果为true，则启用ESC来关闭fancyboxonStartnull回调函数，加载内容是触发onCancelnull回调函数，取消加载内容后触发onCompletenull回调函数，加载内容完成后触发onCleanupnull回调函数，关闭fancybox前触发onClosednull回调函数，关闭fancybox后触发

0 0