消息框jquery-toast-plugin

github地址

官网
大致效果如下：(颜色和样式均可以修改)

**注意:此插件默认具有读条效果，可以设置 loader: false,，去除读条。

自我感觉插件颜色搭配不喜欢，换成element的颜色风格

    <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/datatables/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <!-- 引入消息框 css  -->
    <link href="https://cdn.bootcss.com/jquery-confirm/3.3.2/jquery-confirm.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/jquery-toast-plugin/1.3.2/jquery.toast.min.css" rel="stylesheet">
// 消息框的封装
;(function($){
    $.notice = {};
    var btn = {
        success : {
            bgColor: '#f0f9eb',
            textColor: '#67c23a',
        },
        info: {
            bgColor: '#f4f4f5',
            textColor: '#909399',
        },
        warning:{
            bgColor: '#fdf6ec',
            textColor: '#e6a23c',
        },
        danger:{
            bgColor: '#fef0f0',
            textColor: '#f56c6c'
        }
    }
    var option = {
        text: "Don't forget to star the repository if you like it.", // Text that is to be shown in the toast
        heading: '\n\n', // Optional heading to be shown on the toast
        
        showHideTransition: 'fade', // fade, slide or plain
        allowToastClose: true, // Boolean value true or false
        hideAfter: 1000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
        stack: 10, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
        position: 'top-center', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
        
        bgColor: 'rgba(255,0,0,0.4)',  // Background color of the toast
        textColor: '#eeeeee',  // Text color of the toast
        textAlign: 'left',  // Text alignment i.e. left, right or center
        loader: false,  // Whether to show loader or not. True by default
        loaderBg: '#9EC600',  // Background color of the toast loader
        beforeShow: function () {}, // will be triggered before the toast is shown
        afterShown: function () {}, // will be triggered after the toat has been shown
        beforeHide: function () {}, // will be triggered before the toast gets hidden
        afterHidden: function () {}  // will be triggered after the toast has been hidden
    }
    $.notice.warning = function(msg){
        btn['warning'].text = msg;
        var opt = $.extend(true,option,btn['warning'])
        $.toast(opt)
    }
    $.notice.info = function(msg){
        btn['info'].text = msg;
        var opt = $.extend(true,option,btn['info'])
        $.toast(opt)
    }
    $.notice.success = function(msg){
        btn['success'].text = msg;
        var opt = $.extend(true,option,btn['success'])
        $.toast(opt)
    }
    $.notice.danger = function(msg){
        btn['danger'].text = msg;
        var opt = $.extend(true,option,btn['danger'])
        $.toast(opt)
    }

})($)