toastr是一個基於jQuery簡單、漂亮的消息提示插件，使用簡單、方便，可以根據設置的超時時間自動消失。

相關文件到官網去下載即可

1、引入toastr的js和css文件

1 <link href="/toastr/build/toastr.css" rel="stylesheet">
2 <script src="/toastr/build/toastr.min.js"></script>

2、初始化toastr（此處是自定義）

toastr.options = {  
        closeButton: false,  //是否顯示關閉按鈕（提示框右上角關閉按鈕）
        debug: 
 
false,  //是否為調試；
        progressBar: true,  //是否顯示進度條（設置關閉的超時時間進度條）
        positionClass: "toast-bottom-center",  //消息框在頁面顯示的位置
        onclick: null,  //點擊消息框自定義事件
        showDuration: "300",  //顯示動作時間
        hideDuration: "1000",  //隱藏動作時間
        timeOut: "2000",  //自動關閉超時時間
        extendedTimeOut: "1000",  
        showEasing: 
 
"swing",  
        hideEasing: "linear",  
        showMethod: "fadeIn",  //顯示的方式
        hideMethod: "fadeOut"  //隱藏的方式
};

//常規消息提示，默認背景為淺藍色  
 toastr.info("你有新消息了!");  
//成功消息提示，默認背景為淺綠色 
 toastr.success("你有新消息了!");  
//警告消息提示，默認背景為橘黃色 
 toastr.warning("你有新消息了!");  
//錯誤消息提示，默認背景為淺紅色 
 toastr.error("你有新消息了!");  
 
//帶標題的消息框
 toastr.success("你有新消息了!","消息提示");  
//另一種調用方法
 toastr["info"]("你有新消息了!","消息提示");

Jquery消息提示插件toastr使用