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

toastr操作完成提示框的更多相关文章

  1. 60、常规控件(3)Snackbar-可操作的提示框,Toast升级版

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app=&quo ...

  2. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  3. Bootstrap:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

  4. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  5. Bootstrap实现弹出框和提示框效果代码

    一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打开 ...

  6. Bootstrap篇:弹出框和提示框效果以及代码展示

     前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你 ...

  7. js弹出框、对话框、提示框、弹窗总结

    一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...

  8. JQUERY 简单易用的提示框插件

    业务开发过程中,为了避免用户的误操作,提示框是必要的,于是琢磨出了下面这个使用,方便的提示框 还要引入遮罩层的样式如下: /*弹出层*/.input{height: 32px;border: 1px ...

  9. js js弹出框、对话框、提示框、弹窗总结

    js弹出框.对话框.提示框.弹窗总结 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...

随机推荐

  1. GraphQL ---02 GraphQL和C#结合的实战项目

    本文章是介绍和记录如何创建GraphQL项目,以及如何使用GraphQL进行数据的相关操作.项目参照GraphQL .Net 的官方文档进行实践 一.项目结构: 为了更好的和原有的项目结合在一起,尽可 ...

  2. The type 'Expression<>' is defined in an assembly that is not referenced.You must add a reference to assembly 'System.Core, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'.

    在我将一个.net framework 4.0+mvc4+ef5的项目,升级到.net framework 4.6.1+mvc5+ef6之后,解决了所有的升级带来的问题,唯独在razor的cshtml ...

  3. keepalived安装与配置,组建高可用服务器

    一.准备环境 linux系统:CentOS7 keepalived版本:keepalived-1.3.5.tar.gz keepalived下载地址:http://www.keepalived.org ...

  4. jar文件内lib引用的jar插件修改后更新

    打包的java服务在第三方jar进行修改后,要更新线上的jar包时,直接替换原有lib引用的jar文件,会造成服务起不来, 可在本地clean install之后,用线上的classes文件夹替换本地 ...

  5. phpstudy配置本地https

    百度经验(me'i经过测试) 首先申请免费的ssl证书,很多地方都可以申请.我是在腾讯云!如图 下载证书备份好.以免丢失.解压下载的证书,里面有4个文件夹相对应不同的安装环境,我们用的是Apache, ...

  6. STM32L476RG_中断开发与实列

    本程序的主要功能是实现按键控制灯的亮灭.当灯为灭的状态时按键按下点亮灯,当灯为亮的状态时按键按下熄灭灯,即实现灯的电平翻转操作. 按键扫描是利用 GPIO 下降中断,来监测按键按下动作.并加以消抖操作 ...

  7. photoshop改变图片大小,不改变像素

    用画图修改了图片像素,360*440 但是图片30K,要求图片20K 打开photoshop,打开图片,点击文件--存储为web所用格式,调节品质大小到20K以下,保存即可

  8. 算法第四版中 while (!StdIn.isEmpty()) 循环无法跳出问题

    在IDEA中使用Ctrl+D就可以退出console输入

  9. spring ref &history&design philosophy

    Spring Framework Overview Spring是开发java application的通用框架,分为多个模块(modules),核心是core container,包括configu ...

  10. word文档最上面有一条不是页眉的线

    word2013文档最上面有一条不是页眉的线 在编辑Word文档时发现文档上面出现了一条实线,而且并非页眉,这里我采取了一个方式: 找到[设计]---[页面边框] 找到[边框和底纹]----[页面边框 ...