Custombox是一款带CSS3过渡效果的js模态窗口插件。该插件使用原生js制作,但它也可以和jQuery完美结合,作为jQuery插件来使用。插件中带有20中不同CSS3过渡效果的模态窗口,除了传统的淡入淡出、翻转、旋转等效果,该插件还增加了开门、推拉、角部放大的那个六种效果。
该js模态窗口插件可以工作在 IE 8-11, Firefox, Chrome, Safari 和 Opera等浏览器上。
使用方法
首先要在页面中引入custombox.min.js 和 custombox.min.css文件,为了兼容老的浏览器,还要引入 legacy.js 文件。
<link rel="stylesheet" href="custombox.min.css"> <script src="custombox.min.js"></script> <script src="legacy.min.js"></script>
使用原生js调用
该模态窗口插件可以使用纯js来调用。
<script> document.addEventListener('DOMContentLoaded', function () { document.getElementById('element').addEventListener('click', function ( e ) { Custombox.open({ target: '#modal', effect: 'fadein' }); e.preventDefault(); }); }); </script>
作为jQuery插件调用
该模态窗口插件也可以作为jQuery插件来调用。
<script> $(function () { $('#element').on('click', function ( e ) { Custombox.open({ target: '#modal', effect: 'fadein' }); e.preventDefault(); }); }); </script>
配置参数
参数名 | 类型 | 参数值 | 描述 |
---|---|---|---|
target | string | null | 设置URL, ID 或 Class。 |
id | string | number | null | 设置模态窗口的id。 |
cache | boolean | false | 如果设置为false,当发送AJAX请求时它会强制请求页面不被浏览器缓存。 |
escKey | boolean | true | 是否运算用户使用ESC键退出模态窗口。 |
zIndex | string | number | auto | 覆盖 z-index: Auto 或 number。 |
overlay | boolean | true | 是否显示遮罩层。 |
overlayColor | string | #000 | 遮罩层的颜色。 |
overlayOpacity | number | 0.8 | 遮罩层的透明度。范围: 0 to 1。 |
overlayClose | boolean | true | 是飞运行用户点击遮罩层关闭模态窗口。 |
overlaySpeed | number | 300 | 设置遮罩层的速度。单位:毫秒。 |
overlayEffect | string | auto | 结合任何遮罩层效果。 |
width | number | null | null | 设置一个固定的总宽度。 |
effect | string | fadein | fadein | slide | newspaper | fall | sidefall | blur | flip | sign | superscaled | slit | rotate | letmein | makeway | slip | corner | slidetogether | scale | door | push | contentscale. |
position | string | center, center | 设置模态窗口的位置。 First position 'x': left, center and right. Second position 'y': top, center, bottom. |
animation | string | null | null | Only with effects: slide or rotate (top, right, bottom, left and center) and flip (vertical or horizontal). Output position separated by commas. |
speed | number | 600 | 设置过渡效果的速度,单位:毫秒。 |
事件
事件类型 | 描述 |
---|---|
open | Callback that fires right before begins to open. |
complete | Callback that fires right after loaded content is displayed. |
close | Callback that fires once is closed. |
方法
方法名称 | 方法类型 | Property | 描述 |
---|---|---|---|
open | - | - | 打开模态窗口。 |
close | string | number | last | 关闭模态窗口 |
custombox.open | - | - | 调用打开模态窗口的方法。 |
custombox.complete | - | - | 调用完成模态窗口的方法。 |
custombox.close | - | - | 调用关闭模态窗口的方法。 |
小技巧
- 可以无限连续打开模态窗口,查看DEMO中的示例: example.
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!