jquery訊息外掛 toastr 訊息提示外掛
阿新 • • 發佈：2018-12-24
先給效果圖
下邊是程式碼：
git地址 https://codeseven.github.io/toastr/ 下載外掛包，解壓到本地，一般引用其中build資料夾下toastr.css和toastr.min.js，使用toastr.css而不是toastr.min.css，是為了方便自定義改樣式佈局等等。
<!DOCTYPE html> <html lang="en"> <head> <!-- 引用toastr 的 css js --> <link href="css/toastr.css" rel="stylesheet"> < style type="text/css" > //這裡新增一個居中彈窗位置樣式，建議將這段程式碼放入toastr.css中， //js中使用toastr.options.positionClass = 'toast-center-center'指定當前訊息位置樣式 .toast-center-center { top: 50%; left: 50%; margin-top: -25px; margin-left: -150px; } </style > </head> <body> <!-- html內容 --> <!-- 引用jquery 和 toastr 的js --> <script src="js/jquery.min.js"></script> <script src="js/toastr.min.js"></script> <script> //初始化 toastr 彈窗位置 toastr.options.positionClass = 'toast-center-center'; toastr.success("成功"); toastr.info("通知"); toastr.warning("警告"); toastr.error("錯誤"); clear_toastr(1500); // 動態設定toastr訊息提示時間,一段時間後清除所有提示框 function clear_toastr(time){ setTimeout( function(){ toastr.clear(); }, time); } </script> </body> </html>
參考：
原始碼下載 https://codeseven.github.io/toastr/
清空訊息 http://www.jq22.com/jquery-info476
使用案例 https://blog.csdn.net/cyh1111/article/details/53141037
樣式位置 https://blog.csdn.net/jiong_long/article/details/72972993