品索智能

toastr.js弹窗使用

原创时间:2024-03-13 08:11 作者:AI智能浏览量:4461

toastr.js弹窗使用

toastr.js 下载官网 https://www.bootcdn.cn/toastr.js/

toastr.js的使用：

toastr.js插件的特点：

toastr.js是一个基于jQuery的非阻塞、简单、漂亮的消息提示插件，使用简单、方便。

toastr.js可以设置四种提示样式：成功(success)、错误(error)、提示(info)、警告 (warning)。

可以通过设置参数来设置提示窗口显示的位置、显示的动画等。

调用toastr.js插件之前需要先引入jquery.js toastr.js toastr.css

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
<script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
注意：toastr.js是基于jquery.js库，所以必须在toastr.js之前引入jquery.js

一、在.js中直接调用：

1、常规消息提示，背景色为浅蓝色：

toastr.info('你有新消息了！')

显示效果：

2、成功消息提示，背景色为浅绿色：

toastr.success('你有新消息了！');

显示效果：

3、警告消息提示，背景色为橘黄色：

toastr.warning('你有新消息了！');

显示效果：

4、错误消息提示，背景色为红色：

toastr.error('你有新消息了！');

显示效果：

注意可以让消息框带标题：

toastr.error('你有新消息了！'，‘错误提示框’);

toaster.js配置参考

$(function(){
  
  //参数设置，若用默认值可以省略以下面代
  
 toastr.options = {
 
 "closeButton": false, //是否显示关闭按钮
 
 "debug": false, //是否使用debug模式

"positionClass": "toast-top-full-width",//弹出窗的位置
 
"showDuration": "300",//显示的动画时间
14 
15 "hideDuration": "1000",//消失的动画时间
16 
17 "timeOut": "5000", //展现时间
18 
19 "extendedTimeOut": "1000",//加长展示时间
20 
21 "showEasing": "swing",//显示时的动画缓冲方式
22 
23 "hideEasing": "linear",//消失时的动画缓冲方式
24 
25 "showMethod": "fadeIn",//显示时的动画方式
26 
27 "hideMethod": "fadeOut" //消失时的动画方式
28 
29 };
30 
31  
32 
33 //成功提示绑定
34 
35 $("#success").click(function(){
36 
37 toastr.success("祝贺你成功了");
38 
39 })
40 
41        
42 
43 //信息提示绑定
44 
45 $("#info").click(function(){
46 
47 toastr.info("这是一个提示信息");
48 
49 })
50 
51     
52 
53 //敬告提示绑定
54 
55 $("#warning").click(function(){
56 
57 toastr.warning("警告你别来烦我了");
58 
59 })
60 
61       
62 
63 //错语提示绑定
64 
65 $("#error").click(function(){
66 
67 toastr.error("出现错误，请更改");
68 
69 })
70 
71
72 //清除窗口绑定
73 
74 $("#clear").click(function(){
75 
76 toastr.clear();
77 
78 })
79 
80 });

positionClass官方给的可选属性是，发现并没有水平垂直居中的

toast-top-left  顶端左边
toast-top-right    顶端右边
toast-top-center  顶端中间
toast-top-full-width 顶端，宽度铺满整个屏幕
toast-botton-right  
toast-bottom-left
toast-bottom-center
toast-bottom-full-width

现在要在它的原css文件中自定义一个css样式(弹窗居中)

  .toast-center-center {
           top: 50%;
           left: 50%;
           margin-top: -30px;
           margin-left: -150px;
        }

然后将我们的positionclss改成我们自定义的样式发现toastr提示框居中了

//配置toastr.js
toastr.options = {
    "closeButton": false,
    "debug": false,
    "positionClass": "toast-center-center",
    "showDuration": "500",
    "hideDuration": "1000",
    "timeOut": "1000",
    "showEasing": "swing",
    "hideEasing": "linear",
    "showMethod": "fadeIn",
    "hideMethod": "fadeOut"
}

动动小手 !!!

来说两句吧