引入以下两个插件即可
<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);
}