美文网首页
自定义Toast函数

自定义Toast函数

作者: 回到唐朝做IT | 来源:发表于2018-12-21 15:34 被阅读0次
功能需求:有的toast不好用或者不符合产品样式,可以自定义一个toast函数,里面样式可以自己定义
/* Toast自定义函数 */
function Toast(msg, duration) {
    duration = isNaN(duration) ? 1500 : duration;
    var m = document.createElement('div');
    m.innerHTML = msg; //width:34%
    m.style.cssText = "width: 34%;min-width: 90px;height: auto;color: #fff;line-height: auto;text-align: center;border-radius: 5px;padding:10px;position: fixed;top: 40%;left: 33%;z-index: 999999;background: #696969;font-size: 14px;";
    document.body.appendChild(m);
    setTimeout(function () {
        var d = 0.5;
        m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
        m.style.opacity = '0';
        setTimeout(function () {
            document.body.removeChild(m)
        }, d * 1000);
    }, duration);
}

例如:直接使用:Toast('请输入手机号')

相关文章

  • 自定义Toast函数

    功能需求:有的toast不好用或者不符合产品样式,可以自定义一个toast函数,里面样式可以自己定义 例如:直接使...

  • Toast(自定义Toast)

    默认的Toast: 自定义Toast(自定义图标样式\显示时间\位置): 效果图: 代码:

  • Toast和AlertDialog通用工具

    (1)自定义Toast (2)自定义对话框 (3)二合一 这里涉及到Toast, 使用Toast之前必须先判断是否...

  • Apicloud功能模块使用customToast

    /*Title: customToastDescription: 自定义Toast,让Toast更完美的融入应用,...

  • Tween实战-Toast动画

    自定义Toast 这里并不是创建一个自定义Toast,而是把toast添加到一个window中,对这个window...

  • Android——Toast

    三、使用 1.Toast使用技巧 Toast使用技巧 (1)自定义 Toast 布局 (2)使用 Applicat...

  • Android 自定义Toast

    Android自定义Toast Toast的基础用法 Toast显示的位置通常情况下Toast显示在整个界面的底部...

  • ToastUtil工具类

    自定义toast,解决系统toast连续弹出,长时间不消失的问题

  • Android 带图片的Toast

    Android 带图片的Toast Github代码 带图片的Toast,其实就是自定义布局的Toast,只要T...

  • 自定义小火箭

    ####自定义归属地的Toast 1. 在构造方法,构建Toast的params > 这段代码是从Toast的内部...

网友评论

      本文标题:自定义Toast函数

      本文链接:https://www.haomeiwen.com/subject/ruamkqtx.html