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.