一個好看的消息提示框--前端

引入以下兩個插件即可 

    <link rel="stylesheet" href="static/css/toastr.min.css">
    <link rel="stylesheet" type="text/css" href="static/css//fonts/web-icons/web-icons.min.css"> 

使用時 直接調用封裝好的   

成功時是fnCreateAlert(dt.message,true);  // 綠色提示框

失敗時是fnCreateAlert(dt.error,false); // 黃色提示框

 

    function fnCreateAlert(msg,trueOrFalse){
        var className="";
        if(trueOrFalse){
            className="toast-success";
        }else{
            className="toast-warning";
        }
    var oDiv = $('<div></div>');
    oDiv.addClass('toast-top-right');
    oDiv.attr({
        id:'toast-top-right',
        'aria-live':'polite',
        role:'alert'
    });
    oDiv.html('<div class="toast '+className+'" style="display: block;">'+
             '<div class="toast-title">提示</div>'+
            '<div class="toast-message">'+msg+'</div>'+
        '</div>');
    oDiv.css('top','-80px');
    oDiv.animate({top:12},1000,function(){
        setTimeout(function(){
            oDiv.animate({opacity:0},800,function(){
                oDiv.remove();
            });
        },2000);
    });
    $('body').append(oDiv);
    }