使用环境:在h5中想使用toast,又不想引入移动端的UI库
封装的函数如下:
function Popup() {
var a = document.querySelector("body");
var c = document.createElement("div");
var b = document.createElement("div");
c.style.cssText = "margin: auto;background-color: rgba(0, 0, 0, .5);color: #fff;padding: .2rem .3rem;border-radius: .04rem;";
b.style.cssText = "font-size: .28rem;position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: none;";
b.appendChild(c);
a.appendChild(b);
this.oContent = c;
this.oMask = b
}
Popup.prototype.showToast = function (c, a) {
this.oContent.innerText = c;
this.oMask.style.display = "flex";
var b = this;
setTimeout(function () { b.oMask.style.display = "none" }, a || 1500)
};
使用方法:
oPop.showToast('请输入正确的手机号!',3000)
展示效果: