toast提醒_jquery弹窗插件dialog
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
toast提醒_jquery弹窗插件dialog,希望能够帮助你!!!。
目录
- 简介
- 一、准备工作
- 二、简单使用
- 三、进阶使用
-
- 示例 1：修改弹窗的颜色、标题的样式
- 示例 2：通过修改配置项，自定义弹窗动作
- 示例 3：自定义弹出框的显示位置
- 四、options 配置项详解
简介
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 配置项详解
下面例举一下常用的配置项：
| 1 | 2 | 3 |
|---|---|---|
| closeButton | 是否显示关闭按钮 | 【默认 false】true：显示；false：不显示 |
| progressBar | 是否显示进度条 | 【默认 false】true：显示；false：不显示 |
| positionClass | 弹框的显示位置 | 【默认 toast-top-right 顶端右侧】toast-top-left：顶端左边 toast-top-right：顶端右边 toast-top-center：顶端中间 toast-top-full-width：顶端中间（宽度铺满） toast-bottom-right：底部右边 toast-bottom-left：底部左边 toast-bottom-center：底部中间 toast-bottom-full-width：底部中间（宽度铺满） |
| showDuration | 显示动画持续时间 | 【默认 300ms】单位：毫秒 |
| hideDuration | 消失动画持续时间 | 【默认 1000ms】单位：毫秒 |
| timeOut | 弹框显示时间 | 【默认 5000ms】单位：毫秒 |
| extendedTimeOut | 失去鼠标焦点后，重新的显示时间 | 【默认 1000ms】单位：毫秒 |
| onShown | 弹框显示时触发的操作 | toastr.options.onShown = function() { console.log(‘hello’); } |
| onHidden | 弹框自动消失时触发的操作 | toastr.options.onHidden = function() { console.log(‘goodbye’); } |
| onclick | 单击弹框时触发的操作 | toastr.options.onclick = function() { console.log(‘clicked’); } |
| onCloseClick | 手动关闭弹框时触发的操作 | toastr.options.onCloseClick = function() { console.log(‘close button clicked’); } |
| tapToDismiss | 单击弹框是否立即消失 | 【默认 true】true：立即消失；false：不消失 |
另，maxOpened 测试无效，暂不列出了。
今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
上一篇
已是最后文章
下一篇
已是最新文章
相关推荐
最新文章
