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