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。