jquery 实现简易toast框

2018年8月9日

toast 框在手机端应用非常多，基本的提示都是用的toast提示，显示一下就消失，在pc端的页面用的比较多是alert,但这个场景需要用户手动点击确定才消失，有些时候并不需要用户点击，例如，我复制东西，复制成功，我弹个alert，多麻烦！所以搞了toast

下边我们看看代码，非常简单！自己可以根据需求进行修改！这里用的是jquery

        var showToast = function (msg,option) {
        outTime = 3000;
        if (option&&option.outTime) {
            outTime = option.outTime;
        }
        if (!$(".showtoastresult").html()) {//页面只插入一次，防止多次dom结构的变化，影响效率
            html = "<div class='showtoastresult' style='min-width: 50px;width:";
            html += "auto;padding: 10px 20px;font-size: 14px;font-weight: bold;";
            html += "background: rgba(7, 17, 27, 0.66);border-radius: 6px;color: ";
            html += "rgb(255, 255, 255);top: 50%;z-index: 1000001;transform: translate3d(-50%, -50%, 0px);";
            html += "position: fixed;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: ";
            html += "translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);";
            html += "transform: translate(-50%, -50%);'></div>";
            
            $(document.body).append(html);
        }
        $(".showtoastresult").html(msg);    
        $(".showtoastresult").fadeIn("slow").fadeOut(3000);
        return false;
    }