window.alert弹窗自定义

//定义弹窗数组
var alert_list = [];

/** 
 * 函数说明
 * @function function(text,title) 重置提示框
 * @param text{String} 要提示的文本内容
 * @param title{String} 提示框的标题
 * @version 2.0
 * @example alert("程序结束!!!","网页提示")
 */
window.alert = function(text, title = "网页的提示!!!") {
	var alert_box = document.createElement('div');
	var alert_title = document.createElement('h4');
	var alert_text = document.createElement('div');
	var alert_btn = document.createElement('button');

	//alert弹窗整体样式
	alert_box.style.width = "450px";
	alert_box.style.height = "fit-content";
	alert_box.style.position = "fixed";
	alert_box.style.zIndex = "199";
	alert_box.style.left = "50%";
	alert_box.style.top = "50%";
	alert_box.style.transform = "translate(-50% ,-50%)";
	alert_box.style.backgroundColor = "#fff";
	alert_box.style.padding = "10px";
	alert_box.style.border = "2px solid #C4C4C4";
	alert_box.style.borderRadius = "5px";
	alert_box.style.fontFamily = "'Courier New', Courier, monospace";
	alert_box.style.display = "none";

	//alert 标题样式
	alert_title.style.padding = "0";
	alert_title.style.margin = "0";
	alert_title.style.fontWeight = "600";
	alert_title.innerText = title;
	// alert_title.innerText = "挽月阁";

	//内容文本样式
	alert_text.style.margin = "10px 0";
	alert_text.style.lineHeight = "1.35";
	alert_text.innerText = text;
	// alert_text.innerText = "落霞与孤鹜齐飞,秋水共长天一色";

	//ok按钮
	alert_btn.style.display = "block";
	alert_btn.style.width = "60px";
	alert_btn.style.height = "30px";
	alert_btn.style.lineHeight = "27px";
	alert_btn.style.padding = "2px";
	alert_btn.style.float = "right";
	alert_btn.style.backgroundColor = "#17BBF2";
	alert_btn.style.border = "1px solid #17BBF2";
	alert_btn.style.borderRadius = "2px";
	alert_btn.style.backgroundClip = "content-box";
	// alert_btn.style.transform = "scale(0.8)";
	alert_btn.style.fontWeight = "600";
	alert_btn.style.fontFamily = "'Courier New', Courier, monospace";
	alert_btn.style.fontSize = "15px";
	alert_btn.innerText = "确定";

	//添加ok事件
	alert_btn.addEventListener("click", function() {
		//将弹框移除数组并从body中删除弹窗
		alert_list.shift();
		alert_box.remove();
	});

	//添加弹窗到弹窗数组
	alert_list.push(alert_box);

	//向页面中添加元素
	document.body.appendChild(alert_box);
	alert_box.appendChild(alert_title);
	alert_box.appendChild(alert_text);
	alert_box.appendChild(alert_btn);
};

/*
定义计时器,判断弹窗数组是否为空
确保弹窗数组中的第一个弹窗一直是显示状态
当数组为空的时候清除计时器
*/
var yue = setInterval(function() {
	if (alert_list.length != 0) {
		alert_list[0].style.display = "block";
	} else {
		clearInterval(yue);
	}
}, 100);