带CSS3过渡效果的js模态窗口插件

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>
                

配置参数

事件

方法

小技巧