<!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>
