tingle - 简单实用纯JavaScript模态窗口插件

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

tingle.js 是一款简单实用的纯 JavaScript 模态窗口插件。该模态窗口使用 CSS 来渲染样式，支持 CSS3 过渡动画，提供编程 API。简单易用，效果时尚美观。

使用方法:

使用 tingle.js 模态窗口插件需要在页面中引入 tingle.css 和 tingle.js 文件。

也想出现在这里？联系我们吧

<link rel="stylesheet" href="dist/tingle.css" media="all">

```
<script src="dist/tingle.js"></script>
```

调用模态窗口:

可以通过下面的方法来调用一个模态窗口：

```
// instanciate new modal
```
```
var modal = new tingle.modal({
```
```
    footer: true,
```
```
    stickyFooter: false,
```

    cssClass: ['custom-class-1', 'custom-class-2']

```
    onOpen: function() {
```
```
        console.log('modal open');
```
```
    },
```
```
    onClose: function() {
```
```
        console.log('modal closed');
```
```
    }
```
```
});
```
```
 
```
```
// set content
```

modal.setContent('<h1>here some content</h1>');

```
 
```
```
// add a button
```

modal.addFooterBtn('Button label', 'tingle-btn tingle-btn--primary', function() {

```
    // here goes some logic
```
```
    modal.close();
```
```
});
```
```
 
```
```
// add another button
```

modal.addFooterBtn('Dangerous action !', 'tingle-btn tingle-btn--danger', function() {

```
    // here goes some logic
```
```
    modal.close();
```
```
});
```
```
 
```
```
// open modal
```
```
modal.open();
```
```
 
```
```
// close modal
```
```
modal.close();
```

CSS 样式:

tingle.js 模态窗口的所有样式都用 CSS 来编写，只有极少数定位属性使用 JavaScript 来编写。你可以通过修改 CSS 文件来自定义自己的模态窗口样式。注意，对于模糊效果，你需要将你的内容包裹在 class 为.ingle-content-wrapper 的容器中。tingle.js 提供了一组预定义的按钮样式。

tingle-btn

tingle-btn--primary

tingle-btn--default

tingle-btn--danger

tingle-btn--pull-left

tingle-btn--pull-right