带CSS3过渡效果js窗口插件

PetitQ 对话框/Tips 2018-10-26 1.63K 0 0

Custombox 是一款带 CSS3 过渡效果的 js 模态窗口插件。该插件使用原生 js 制作，但它也可以和 jQuery 完美结合，作为 jQuery 插件来使用。插件中带有 20 中不同 CSS3 过渡效果的模态窗口。该插件使用原生 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.

方法：

open - - 打开模态窗口。 close string | number last 关闭模态窗口 custombox.open - - 调用打开模态窗口的方法。 custombox.complete - - 调用完成模态窗口的方法。 custombox.close - - 调用关闭模态窗口的方法。