修改alert提示框的css样式

本教程重写了alert方法,可修改蒙版颜色,提示信息的字体颜色,按钮背景颜色,按钮字体颜色,按钮水平位置等,修改方式为设定好的变量中直接修改变量值,若有需要也可直接修改本教程中的代码.

重写后的弹出框不仅仅能够显示文字,也可以显示图片,甚至是其他内容,具体效果可在该文章最后面查看提供的图片.

使用时,建议封装到单独的文件中,作为插件使用,如alert.js.

window.alert = function(msg){
	var maskBg = '#0000002b';						//蒙版展示色
	var zIndex = 999999;							//修改弹出层z-index,应为最顶层,避免被覆盖
	var desColor = '#1f0000'						//提示信息字体颜色
	var buttonVal = '确定';							//确定按钮名称
	var btnBgColor = '#f61717';						//确定按钮背景颜色
	var btnColor = '#fff';							//确定按钮字体颜色
	var btnAlign = 'right';							//按钮在水平位置,默认居中,变量值:left,center,right
	var style = `
			
		`;
	
	var head = document.getElementsByTagName('head')[0];
	head.innerHTML += style		//头部加入样式,注意不可使用document.write()写入文件,否则出错
	
	const body = document.getElementsByTagName('body')[0];
		
	var alertMask = document.createElement('div');
	var alertContainer = document.createElement('div');
	var alertDes = document.createElement('div');
	var alertConfirmParent = document.createElement('div');
	var alertConfirmBtn = document.createElement('button');	
	
	body.append(alertMask);
	alertMask.classList.add('alertMask');
	alertMask.classList.add('box-sizing');
	
	alertMask.append(alertContainer);
	alertContainer.classList.add('alertContainer');
	alertContainer.classList.add('box-sizing');
		
	alertContainer.append(alertDes);
	alertDes.classList.add('alertDes');
	alertDes.classList.add('box-sizing');
	
	alertContainer.append(alertConfirmParent);
	alertConfirmParent.classList.add('alertConfirmParent');
	alertConfirmParent.classList.add('box-sizing');	
	
	alertConfirmParent.append(alertConfirmBtn);
	alertConfirmBtn.classList.add('alertConfirmBtn');
	alertConfirmBtn.classList.add('box-sizing');
	alertConfirmBtn.innerText = buttonVal;
	
	//加载提示信息	
	alertDes.innerHTML = msg;
	//关闭当前alert弹窗
	function alertBtnClick(){
		body.removeChild(alertMask);
		maskStyle = head.getElementsByClassName('mask-style')[0];
		head.removeChild(maskStyle);	//移除生成的css样式
		
	}
	alertConfirmBtn.addEventListener("click", alertBtnClick);
}

展示文字示例:

alert('被修改的alert样式如我所示')

效果

显示图片示例:

alert('')

效果

如有不足或建议,请留言指出,谢谢!
转载自：吾爱自学