<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加载中...</title> </head> <body> <button onclick="t()">弹出toast</button> <script src="http://lib.baomitu.com/jquery/3.2.1/jquery.min.js"></script> <script> var popToast = function() {} popToast.prototype = { timer: function(delay) { var t = null; clearTimeout(t); t = setTimeout(function() { $(".toast-msg").fadeOut(200, function() { $(".toast-msg").remove(); }); }, delay); }, toastMsg: function(content, position, delay) { var html = ""; html = '<div class="toast-msg" style="position:fixed;margin:auto;padding:0.5rem 1.0rem;left:50%;bottom:1rem;transform: translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);border-radius:0.33rem;font-size:1.08rem;color:#fff;background:rgba(0,0,0,.6);z-index:999;"><p>' + content + '</p></div>'; if (position == 'center') { html = '<div class="toast-msg" style="position:fixed;margin:auto;padding:0.5rem 1.0rem;top:50%;left:50%;transform: translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);border-radius:0.33rem;font-size:1.08rem;color:#fff;background:rgba(0,0,0,.6);z-index:999;"><p>' + content + '</p></div>'; } $("body").append(html); popToast.timer(delay); }, remove: function(ele) { $(ele).remove(); } } var popToast = new popToast(); function t() { popToast.toastMsg('message123456','center',2000); } </script> </body> </html>