toastr是一個基於Jquery簡單、漂亮的訊息提示外掛，使用簡單、方便，可以根據設定的超時時間自動消失。

1、使用很簡單，首選引入toastr的js、css檔案
html

<script src="<%=path%>/res/toastr/toastr.min.js"></script>
<link rel="stylesheet" href="<%=path%>/res/toastr/toastr.min.css">

2、整合使用

//常規訊息提示，預設背景為淺藍色  
toastr.info("你有新訊息了!");  

//成功訊息提示，預設背景為淺綠色
toastr.success("你有新訊息了!");  

//警告訊息提示，預設背景為橘黃色
toastr.warning("你有新訊息了!");  

//錯誤訊息提示，預設背景為淺紅色
toastr.error("你有新訊息了!");  

//帶標題的訊息框
toastr.success("你有新訊息了!","訊息提示");  

//另一種呼叫方法
toastr["info"]("你有新訊息了!","訊息提示") 

3、自定義用法
通過設定自定義引數，可達到不同的效果

toastr.options = {
 
            "closeButton": false, //是否顯示關閉按鈕
 
            "debug": false, //是否使用debug模式
 
            "positionClass": "toast-center-center",//彈出窗的位置
 
            "showDuration": "300",//顯示的動畫時間
 
            "hideDuration": "1000",//消失的動畫時間
 
            "timeOut": "5000", //展現時間
 
            "extendedTimeOut": "1000",//加長展示時間
 
            "showEasing": "swing",//顯示時的動畫緩衝方式
 
            "hideEasing": "linear",//消失時的動畫緩衝方式
 
            "showMethod": "fadeIn",//顯示時的動畫方式
 
            "hideMethod": "fadeOut" //消失時的動畫方式
        };
 

4、預設的放置位置positionClass只有上top下bottom，並沒有垂直居中

oast-top-left 頂端左邊 
toast-top-right 頂端右邊
 toast-top-center 頂端中間
 toast-top-full-width 頂端，寬度鋪滿整個螢幕 
toast-botton-right
 toast-bottom-left
 toast-bottom-center
 toast-bottom-full-width

這時候，我們需要去原生的css中新增以下程式碼，

  .toast-center-center {
           top: 50%;
           left: 50%;
           margin-top: -30px;
           margin-left: -150px;
        }

在應用的時候，把預設positionClass的值修改為.toast-center-center，這樣就可以水平垂直都居中啦~

toastr.options.positionClass = 'toast-center-center';

5、總結

　　toastr作為一個提示框，真的是非常的簡單，預設樣式也很nice，值得使用。

---------------------
作者：nuomizhende45
來源：CSDN
原文：https://blog.csdn.net/nuomizhende45/article/details/84205977
版權宣告：本文為博主原創文章，轉載請附上博文連結！