非本人原创，此为本人导师代码，在此整理分析。
1、遮蔽层，弹框弹出时，页面变灰。
CSS部分
.overlay{display:none;position:fixed;left:0;top:0;z-index:1000;width:100%;height:100%;background-color:hsla(0, 0%, 0%, .7);}
2、定时提示小弹框，页面垂直居中显示
/*toast提示*/
.toast{position:fixed;top:50%;left:50%;z-index:1100;display:none;width:13em;padding:.8em 1em;background-color:hsla(0, 0%, 0%, .7);
text-align:center;color:#fff;font-size:14px;line-height:1.3;border-radius:.5em;
box-shadow:0 0 4px 2px hsla(0, 0%, 0%, .3);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
JS部分
/**
* toast提示，用于提示用户信息，4秒后自动关闭，点击页面关闭
*调用：toast(string)
*/
toast: (function() {
var d = document,
ele = d.getElementById("toast"),
isVisible = 0, //还想不明白为什么要设置这里
identity;
if(ele === null) {
ele = d.createElement("div");
ele.id = "toast";
ele.className = "toast";
ele.style.display = "none";
d.body.appendChild(ele);
} //创建DIV
var hideFn = function() {
if(isVisible) {
clearTimeout(identity);
ele.style.display = "none";
isVisible = 0;
}
};
d.addEventListener("click", hideFn, true);
function show(string) {
ele.innerHTML = string;
ele.style.display = "block";
isVisible = 1;
clearTimeout(identity);
identity = setTimeout(function() {
}, 4000);
return identity;
}
return show;
}())
};