https://www.8comic.com/js/bs/alert.js

1window.alert = function(msg){
2	var maskBg = '#000000a1';						//蒙版展示色
3	var zIndex = 999999;							//修改弹出层z-index,应为最顶层,避免被覆盖
4	var desColor = '#1f0000'						//提示信息字体颜色
5	var buttonVal = '確定';							//确定按钮名称
6	var btnBgColor = '#363636';						//确定按钮背景颜色
7	var btnColor = '#fff';							//确定按钮字体颜色
8	var btnAlign = 'right';							//按钮在水平位置,默认居中,变量值:left,center,right
9	var style = `
10			<style class="mask-style">
11				.box-sizing{
12					box-sizing: border-box;
13				}
14				.alertMask{
15					position: fixed;	/*生成绝对定位的元素，相对于浏览器窗口进行定位*/
16					display: flex;
17					display: webkit-flex;
18					flex-direction: row;
19					align-items: center;
20					justify-content: center;
21					width: 100%;
22					height: 100%;
23					top: 0;
24					left: 0;
25					z-index: `+zIndex+`;
26					background: `+maskBg+`;
27				}
28				.alertContainer{
29					min-width: 320px;	/*容器最小240px*/
30					max-width: 480px;	/*容器最大320px*/
31					background:#fff;
32					border: 1px solid `+maskBg+`;
33					border-radius: .3rem;
34					color: `+desColor+`;
35					overflow: hidden;									
36				}
37				.alertDes{
38					padding: 35px 30px;
39					text-align: center;
40					letter-spacing: 1px;
41					font-size: 14px;
42					color: `+desColor+`;
43				}
44				.alertDes img{
45					max-width: 100%;
46					height: auto;
47				}
48				.alertConfirmParent{
49					width: 100%;
50					padding: 1rem;
51					text-align: `+btnAlign+`;
52					box-sizing: border-box;
53				}
54				.alertConfirmBtn{
55					cursor: pointer;
56					padding: .3rem .5rem;
57					border: none;
58					border-radius: .3rem;
59					color: `+btnColor+`;
60					background-color: `+btnBgColor+`;
61				}
62			</style>
63		`;
64	
65	var head = document.getElementsByTagName('head')[0];
66	head.innerHTML += style		//头部加入样式,注意不可使用document.write()写入文件,否则出错
67	
68	const body = document.getElementsByTagName('body')[0];
69		
70	var alertMask = document.createElement('div');
71	var alertContainer = document.createElement('div');
72	var alertDes = document.createElement('div');
73	var alertConfirmParent = document.createElement('div');
74	var alertConfirmBtn = document.createElement('button');	
75	
76	body.append(alertMask);
77	alertMask.classList.add('alertMask');
78	alertMask.classList.add('box-sizing');
79	
80	alertMask.append(alertContainer);
81	alertContainer.classList.add('alertContainer');
82	alertContainer.classList.add('box-sizing');
83		
84	alertContainer.append(alertDes);
85	alertDes.classList.add('alertDes');
86	alertDes.classList.add('box-sizing');
87	
88	alertContainer.append(alertConfirmParent);
89	alertConfirmParent.classList.add('alertConfirmParent');
90	alertConfirmParent.classList.add('box-sizing');	
91	
92	alertConfirmParent.append(alertConfirmBtn);
93	alertConfirmBtn.classList.add('alertConfirmBtn');
94	alertConfirmBtn.classList.add('box-sizing');
95	alertConfirmBtn.innerText = buttonVal;
96	
97	//加载提示信息	
98	alertDes.innerHTML = msg;
99	//关闭当前alert弹窗
100	function alertBtnClick(){
101		body.removeChild(alertMask);
102		maskStyle = head.getElementsByClassName('mask-style')[0];
103		head.removeChild(maskStyle);	//移除生成的css样式
104		
105	}
106	alertConfirmBtn.addEventListener("click", alertBtnClick);
107}