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