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

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

安装

可以通过bower或npm来安装tingle.js模态窗口插件。

bower install tingle --save
npm install tingle.js --save                  
                

使用方法

使用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

配置参数

• footer：类型：boolean。是否显示footer。
• stickyFooter：类型：boolean。是否将footer固定在页面底部。
• onOpen：类型：function。模态窗口打开时的回调函数。
• onClose：类型：function。模态窗口关闭时的回调函数。
• cssClass：类型：array。添加到模态窗口容器上的class类。

API

tingle.js提供了以下一些可用的api：

• open()：打开模态窗口（会在body上添加tingle-enabled class类）。
• close()：光标模态窗口。
• destroy()：销毁模态窗口（从DOM中移除，并解绑所有相关事件）。
• setContent(content)：设置模态窗口的内容。
• getContent()：获取模态窗口的内容。
• setFooterContent(content)：设置footer的内容。
• getFooterContent(content)：获取footer的内容。
• addFooterBtn(label, cssClass, callback)：在footer中添加按钮（使用cssClass参数来设置样式和定位）。
• resize()：重新计算模态窗口的位置。
• isOverflow()：如果模态窗口的高度大于视口的高度返回true。

tingle.js模态窗口插件的github地址为：https://github.com/robinparisi/tingle。