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。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!