jQuery跨浏览器自动关闭消息通知弹出层插件 - iziToast.js

iziToast.js是一款跨浏览器响应式消息通知插件。该消息通知插件体积小，使用简单。消息显示时带CSS3动画效果，时尚大方。它的特点还有：自带4种主题效果： info, warning, error 和 success。可以自定义主题。可以自定义图标。可以自定义图片。可以自定义消息通知显示的位置。消息通知可以设置为自动关闭。可以自定义消息通知框显示时的CSS3动画。使用方法在页面中引入iziToast.min.css和iziToast.min.js文件 初始化插件可以通过iziToast.show()方法来实例化一个消息通知框。iziToast.show({ title: 'Hello World!', message: 'I am a basic toast message!'});配置参数iziToast.js消息通知插件的默认配置参数如下：iziToast.show({ class: '', title: '', message: '', color: '', // blue, red, green, yellow icon: '', iconText: '', iconColor: '', image: '', imageWidth: 50, layout: 1, balloon: false, close: true, rtl: false, position: 'bottomRight', target: '', timeout: 5000, pauseOnHover: true, resetOnHover: false, progressBar: true, progressBarColor: '', animateInside: true, buttons: {}, transitionIn: 'fadeInUp', transitionOut: 'fadeOut', transitionInMobile: 'fadeInUp', transitionOutMobile: 'fadeOutDown', onOpen: function () {}, onClose: function () {}}); 方法settings()方法用于设置默认值。iziToast.settings({ timeout: 10000, resetOnHover: true, icon: 'material-icons', transitionIn: 'flipInX', transitionOut: 'flipOutX', onOpen: function(){ console.log('callback abriu!'); }, onClose: function(){ console.log("callback fechou!"); }}); show()方法用于打开一个消息通知框。iziToast.show({ color: 'dark', icon: 'icon-person', title: 'Hey', message: 'Welcome!', position: 'center', progressBarColor: 'rgb(0, 255, 184)', buttons: [ ['Ok', function (instance, toast) { alert("Hello world!"); }], ['Close', function (instance, toast) { instance.hide({ transitionOut: 'fadeOutUp' }, toast); }] ]}); hide()方法用于关闭一个消息通知框。var toast = document.querySelector('.toast'); iziToast.hide({ transitionOut: 'fadeOutUp'}, toast); destroy()方法用于销毁消息通知框。iziToast.destroy(); info()方法。iziToast.info({ title: 'Hello', message: 'Welcome!',}); success()方法。iziToast.success({ title: 'OK', message: 'Successfully inserted record!',});warning()方法。iziToast.warning({ title: 'Caution', message: 'You forgot important data', });error()方法。iziToast.error({ title: 'Error', message: 'Illegal operation',});事件Open - 在消息通知框打开时触发。document.addEventListener('iziToast-open', function(data){ if(data.detail.class == 'test'){ console.log('test open'); }}); Close - 在消息通知框关闭时触发。document.addEventListener('iziToast-close', function(data){ if(data.detail.class == 'test'){ console.log('test close'); }});

在线演示        积分下载        6毛下载        砍两刀下载