提示对话框

spop.js是一款纯js toast消息提示通知插件。通过spop.js插件，你可以快速的在网页上制作出漂亮的toast消息提示效果。该js toast消息提示插件的特点还有：

• 内置4种主题样式：default, success, warning, error。
• toast可以显示在屏幕的6个位置：top-left, top-center, top-right, bottom-left, bottom-center, bottom-right。
• 可以对消息提示进行编组。
• 提供打开和关闭消息提示时的回调函数。
• 支持HTML内容。

使用方法

在页面中引入spop.css和spop.js文件。

<link rel='stylesheet' type='text/css' href='./css/spop.css'><script type='text/javascript' src='./js/spop.js'></script>

初始化toast

该js toast消息提示插件最基本的使用方法如下：

spop('Default SmallPop');spop('<h4 class='spop-title'>Success</h4>I´m a success SmallPop', 'success');spop('<strong>Warning pop</strong>', 'warning');spop('<strong>Error Here!</strong>', 'error');

分组

可以对消息进行分组，分组后的消息每次只显示一条。

spop({ template: 'All fields are required!', group: 'submit-satus', style: 'error'});spop({ template: 'Your information has been submitted', group: 'submit-satus', style: 'success' autoclose: 2000});

回调函数

在toast消息提示打开和关闭时都可以使用回调函数。

spop({  template: 'Please, close me.',  onOpen: function () {    document.body.style.background = '#fff';  },  onClose: function() {    document.body.style.background = '';    spop({      template: 'Thank you!',      style: 'success',      autoclose: 2000    });  }});                  

配置参数

spop.js消息提示插件的可用配置参数如下：

spop({ template : null,// string required. Without it nothing happens! style : 'info',// success, warning or error autoclose : false,// miliseconds position : 'top-right',// top-left top-center bottom-left bottom-center bottom-right icon : true,// or false group : false,// string, add a id reference onOpen : funtion() { }, onClose : funtion() { }});

• template：消息提示的模板。可以是一个字符串，或这是HTML代码。
• style：toast消息提示的主题样式，可以是info，success， warning 或 error。
• autoclose：是否自动关闭。
• position：toast消息提示的位置。可以是：top-right，top-left，top-center，bottom-left，bottom-center或bottom-right。
• icon：是否显示图标。
• group：是否对消息进行分组。
• onOpen：toast消息提示打开时的回调函数。
• onClose：toast消息提示关闭时的回调函数。

Github地址为：https://github.com/silvio-r/spop