弹框CSS、JS

非本人原创，此为本人导师代码，在此整理分析。
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、定时提示小弹框，页面垂直居中显示



CSS部分

/*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() {
ele.style.display = "none";
isVisible = 0;
}, 4000);

return identity;
}

return show;
}())
};
/**
* 弹窗提示功能
* dialog.show(jq) 显示弹窗
* dialog.hide() 关闭弹窗
*/
dialog: (function() {
var overlay, dialog;

if($("#overlay").length > 0) { //检查#overlay是否存在
overlay = $("#overlay");
} else {
overlay = $('<div id="overlay" class="overlay"></div>').appendTo($("body"));
}

dialog = $(".dialog-box");

var show = function(jq) {
overlay.show();
jq.show(); //特定弹框显示
};

var hide = function() {
dialog.hide(); //全部弹框隐藏
overlay.hide();
};

dialog.find(".btn-close").on("click", function(event) { //这是有一个十字关闭按钮
$(event.target).parents(".dialog-box").hide(); //target 属性规定哪个 DOM 元素触发了该事件 overlay.hide();
});

overlay.on("click", hide); //相当于点击弹框外，弹框隐藏

return {
show: show,
hide: hide
}
}()),

本文出自 “大番薯1号” 博客，谢绝转载！