toastr操作完成提示框

toastr.js組件

　　關於信息提示框，項目中使用的是toastr.js這個組件，這個組件最大的好處就是異步、無阻塞，提示后可設置消失時間，並且可以將消息提示放到界面的各個地方。

 

官方文檔以及源碼

　　源碼網站：http://codeseven.github.io/toastr/

　　api：http://www.ithao123.cn/content-2414918.html

 

引入js和css　　

    <link href="/static/js/toastr/toastr.css" rel="stylesheet">  
    <!--消息提示-->
    <script src="/static/js/toastr/toastr.js"></script>

 

設置提示框位置： toastr.options.positionClass = 'toast-bottom-right';

如toast-bottom-right表示下右、toast-bottom-center表示下中、toast-top-center表示上中等

<script type="text/javascript">
          toastr.options.positionClass = 'toast-bottom-right';
  </script>

 

在js中使用

toastr.success('提交數據成功');
toastr.error('Error');
toastr.warning('只能選擇一行進行編輯');
toastr.info('info');

效果如下：

 

推薦學習網址：https://codeseven.github.io/toastr/demo.html