toast.js

toast.js

/** * toast 一般用于操作成功时的提示场景 * @param {string} content toast的文字 * @param {Object|function=} options 配置项或回调 * @param {number=} [options.duration=3000] 多少毫秒后关闭toast * @param {function=} options.callback 关闭后的回调 * @param {string=} options.className 自定义类名 * * @example * Toast('操作成功', 3000); * Toast('操作成功', { *     duration: 3000, *     className: 'custom-classname', *     callback: function(){ console.log('close') } * }); */(function(global,factory){    if(typeof define === 'function' && define.amd){        define(function(){            return factory();        });    }else if(typeof module !== 'undefined' && module.exports){        module.exports = factory();    }else{        global.Toast = factory(global);    }}(typeof window !== 'undefined' ? window : this,function(win){    var _sington;    var toast = function(content, options){        var style = '.ui-toast{position:fixed;z-index:5000;width:7.6em;top:180px;left:50%;margin-left:-3.8em;background:rgba(17,17,17,0.7);text-align:center;border-radius:5px;color:#FFFFFF;}.ui-toast__content{padding:12px;font-size:16px;}.ui-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.6);}.ui-mask_transparent{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;}@-webkit-keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}.ui-animate-fade-in{-webkit-animation:fadeIn ease .3s forwards;animation:fadeIn ease .3s forwards;}@-webkit-keyframes fadeOut{from{opacity:1;}to{opacity:0;}}@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}.ui-animate-fade-out{-webkit-animation:fadeOut ease .3s forwards;animation:fadeOut ease .3s forwards;}';        $('head').append('<style type="text/css">'+style+'</style>');        if(_sington) return _sington;        if (typeof options === 'number') {            options = {                duration: options            };        }        if (typeof options === 'function') {            options = {                callback: options            };        }        options = $.extend({            content: content,            duration: 3000,            callback: function(){},            className: ''        }, options);        var contentHtml = "";        if(options.content){            contentHtml = '<p class="ui-toast__content">'+options.content+'</p>';        }        const toastWrap = '<div class="'+options.className+'">'+            '    <div class="ui-mask_transparent"></div>'+            '    <div class="ui-toast">'+                    contentHtml+            '       </div>'+            '    </div>'+            '</div>';        const $toastWrap = $(toastWrap);        const $toast = $toastWrap.find('.ui-toast');        const $mask = $toastWrap.find('.ui-mask');        $('body').append($toastWrap);        // 不能直接把.ui-animate-fade-in加到$dialog，会导致mask的z-index有问题        $mask.addClass('ui-animate-fade-in');        $toast.addClass('ui-animate-fade-in');        setTimeout(function(){            $mask.addClass("ui-animate-fade-out");            $toast.addClass('ui-animate-fade-out')                .on('animationend webkitAnimationEnd', function(){                    $toastWrap.remove();                    _sington = false;                    options.callback();                })        }, options.duration);        _sington = $toastWrap[0];        return _sington;    };    return toast;}));

toast.less

.ui-toast{  position:fixed;  z-index:5000;  width:7.6em;  top:180px;  left:50%;  margin-left:-3.8em;  background:rgba(17, 17, 17, 0.7);  text-align:center;  border-radius:5px;  color:#FFFFFF;}.ui-toast__content{  padding: 12px;  font-size: 16px;}.ui-mask{  position:fixed;  z-index:1000;  top:0;  right:0;  left:0;  bottom:0;  background:rgba(0, 0, 0, 0.6);}.ui-mask_transparent{  position:fixed;  z-index:1000;  top:0;  right:0;  left:0;  bottom:0;}@-webkit-keyframes fadeIn{  from{    opacity:0;  }  to{    opacity:1;  }}@keyframes fadeIn{  from{    opacity:0;  }  to{    opacity:1;  }}.ui-animate-fade-in{  -webkit-animation:fadeIn ease .3s forwards;  animation:fadeIn ease .3s forwards;}@-webkit-keyframes fadeOut{  from{    opacity:1;  }  to{    opacity:0;  }}@keyframes fadeOut{  from{    opacity:1;  }  to{    opacity:0;  }}.ui-animate-fade-out{  -webkit-animation:fadeOut ease .3s forwards;  animation:fadeOut ease .3s forwards;}