toastr.js 便捷弹框怎么用？怎么本地化？

〇、简介

toastr.js 是一个非常简洁的弹窗消息插件，主要原因就是其脚本和样式文件较小。

并且可以根据自己的需求，修改样式文件，可以应用在多种不同的场景。

https://codeseven.github.io/toastr/

https://github.com/CodeSeven/toastr

一、准备工作

调用 toastr 插件之前需要先引入三个文件：

  jquery.js、toastr.js、toastr.css。

例如，可以通过 CDN 导入：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">

二、简单使用

引入后，可以简单的通过 toastr.xxx 直接调用，按照提示类型选择对应的弹框即可。例如：

注：第二个参数是标题，样式可以修改，下文会介绍。

toastr.info("请阅读当前提示信息！")
toastr.info("请阅读当前提示信息！","信息")
toastr.success("恭喜，操作成功了！")
toastr.success("恭喜，操作成功了！", "成功")
toastr.warning("注意，这是一条警告信息！")
toastr.warning("注意，这是一条警告信息！", "警告")
toastr.error("操作失败了！");
toastr.error("操作失败了！", "失败");

// toastr.clear();// 移除所有,有动画效果
// toastr.remove();// 移除所有，没有动画效果

弹窗模样：

注：鼠标锁定焦点时，颜色会加重，如下带标题的成功弹框。

三、进阶使用

可以通过修改样式文件 toastr.css 来定制弹框的样式。

示例 1：修改弹窗的颜色、标题的样式

  如下图中的位置，可以修改对应的 background-color 弹框背景颜色值，以及添加 font-size 样式。

   效果：

 示例 2：通过修改配置项，自定义弹窗动作

var messageOpts = {
    "closeButton": true,// 是否显示关闭按钮
    "progressBar":true,// 是否显示进度条
    "positionClass": "toast-bottom-left",// 弹出窗的位置
    "showDuration": "1000",// 显示的动画时间
    "hideDuration": "1000",// 消失的动画时间
    "timeOut": "6000",// 弹窗展现时间
    "showEasing": "swing",//显示时的动画缓冲方式
    "hideEasing": "linear",//消失时的动画缓冲方式
    "showMethod": "fadeIn",//显示时的动画方式
    "hideMethod": "fadeOut", //消失时的动画方式
    "allowHtml":true,// 允许弹窗内容包含 HTML 语言
};
toastr.options = messageOpts;

toastr.warning("注意，这是一条警告信息！", "警告")

弹窗样式：

示例 3：自定义弹出框的显示位置

如下自定义一个在页面中间位置显示的弹窗样式：（显示的位置可以灵活调整）

"positionClass": "toast-center-center",// 弹出窗的位置配置

 四、options 配置项详解

下面例举一下常用的配置项：

另，maxOpened 测试无效，暂不列出了。

注：个人整理，欢迎指正和补充。