网站首页> 文章专栏> toastr.js弹窗使用
toastr.js弹窗使用
原创 时间:2024-03-13 08:11 作者:AI智能 浏览量:4580
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('你有新消息了!')
     显示效果:
1710317417774.webp
2、成功消息提示,背景色为浅绿色:
     toastr.success('你有新消息了!');
    显示效果:
1710317422603.webp
    
3、警告消息提示,背景色为橘黄色:
     toastr.warning('你有新消息了!');
    显示效果:
1710317426620.webp
       
4、错误消息提示,背景色为红色:
     toastr.error('你有新消息了!');
     显示效果:
1710317431019.webp
    
注意可以让消息框带标题:
      toastr.error('你有新消息了!',‘错误提示框’);
1710317435697.webp

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;
        }

1710317442843.webp

然后将我们的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"
}

1710317447589.webp

1710317452827.webp

动动小手 !!!
来说两句吧
最新评论
  • 深海有鱼
    你好,方便分享一下文档嘛

    网路侠客 回复 深海有鱼 同上,一起学习

    2024-03-20 14:24:48 回复

  • 我本帅哥
    讲的太好了

  • 首席先森
    博主专业,文章写的很不错,希望博主继续加油!

  • 精英男士低调
    效果挺不错,感谢分享!

  • 绽放丶硪的青春
    前排三连,好文章值得赞美。

  • 肌肉猛男
    感谢大佬