师院派记忆你的回忆
toastr信息提示框如何屏幕居中
  • 首页 > 开发语言
  • 作者:zhyu20
  • 2019年3月21日 12:01 星期四
  • 浏览:223
  • 字号:
  • 评论:
  • toastr  是一个很好用的信息提示插件,但是使用原生的toastr提示框提示语默认会出现在右上角现在想要居中,百度了以下提示框的属性发现有一个控制的属性positionClass


    toastr.options = {
     
                "closeButton": false, //是否显示关闭按钮
     
                "debug": false, //是否使用debug模式
     
                "positionClass": "toast-center-center",//弹出窗的位置
     
                "showDuration": "300",//显示的动画时间
     
                "hideDuration": "1000",//消失的动画时间
     
                "timeOut": "5000", //展现时间
     
                "extendedTimeOut": "1000",//加长展示时间
     
                "showEasing": "swing",//显示时的动画缓冲方式
     
                "hideEasing": "linear",//消失时的动画缓冲方式
     
                "showMethod": "fadeIn",//显示时的动画方式
     
                "hideMethod": "fadeOut" //消失时的动画方式
            };

    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提示框居中了
     

    
    
      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:zhyu20      文章标题: toastr信息提示框如何屏幕居中
    本文地址:http://blog.shiyuanpai.com/kaifayuyan/854.html
    版权声明:若无注明,本文皆为“师院博客”原创,转载请保留文章出处。
    • blogger
    返回顶部| 首页| 手气不错| 后花园

    Copyright © 2014-2016 师院博客   皖ICP备14013862号

    sitemap