toastr是非阻塞通知的JavaScript庫。jQuery是必需的。我們的目標是創建一個簡單的核心庫，可以自定義和擴展。
使用方法：
1.引入jquery.js
2、引入toastr.js,toastr.csss
toastr.js下載地址
toastr.css下載地址
引入以上文件後，即可使用toastr插件
代碼如下：
效果查看
<!DOCTYPE HTML >
<html>
<head>
<script src="/toastr/jquery-1.9.1.min.js"></script>
<link href="/toastr/toastr.css" rel="stylesheet"/>
<script src="/toastr/toastr.js"></script>
<script type="text/javascript">
$(function() {
//設置顯示配置
var messageOpts = {
"closeButton" : true,//是否顯示關閉按鈕
"progressBar": true,
"debug" : false,//是否使用debug模式
//彈出窗的位置 【 右上角 ：toast-top-right，右下角：toast-bottom-right，左下角：toast-bottom-left，左上角：toast-top-left,
//頂部全屏：toast-top-full-width，底部全屏：toast-bottom-full-width
"positionClass" : "toast-bottom-right",
"onclick" : null,
"showDuration" : "300",//顯示的動畫時間
"hideDuration" : "1000",//消失的動畫時間
"timeOut" : "1000",//展現時間
"extendedTimeOut" : "1000",//加長展示時間
"showEasing" : "swing",//顯示時的動畫緩衝方式
"hideEasing" : "linear",//消失時的動畫緩衝方式
"showMethod" : "fadeIn",//顯示時的動畫方式
"hideMethod" : "fadeOut" //消失時的動畫方式
};
toastr.options = messageOpts;
$('#showtoast').click(function() {
//提示
//調用方法1
toastr.info('內容1');
//顯示消息框
toastr.info('內容2', '標題2');
//調用方法3
toastr['info']('內容3', '標題3');
//調用方法4
toastr.info('內容4', '標題4',messageOpts);
});
//成功消息框
$('#showtoastsuccess').click(function() {
toastr.success('內容4', '標題4',messageOpts);
});
$('#showtoasterror').click(function() {
//錯誤
toastr.error('內容error', '標題error');
//警告
toastr.warning('內容warning', '標題warning');
});
$('#showtoastwarning').click(function() {
//警告
toastr.warning('內容warning', '標題warning');
});
$('#cleartoasts').click(function() {
//清除
toastr.clear();
});
$('#removetoasts').click(function() {
//移除
toastr.remove();
});
});
</script>
</head>
<!-- 不同的級別，具有不同顏色的框 -->
<button id="showtoast">顯示提示框</button>
<br>
<button id="showtoastsuccess">顯示成功</button>
<br>
<button id="showtoasterror">（錯誤）</button>
<br>
<button id="showtoastwarning">（警告）</button>
<br>
<button id="cleartoasts">（清除）</button>
<br>
<button id="removetoasts">（移除）</button>
<br>
<body>
</body>
</html>
