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');
效果如下: