好看的原生alert样式

window.alert = function(msg){
var maskBg = ‘#0000002b’; //蒙版展示色
var zIndex = 999999; //修改弹出层z-index,应为最顶层,避免被覆盖
var desColor = ‘#1f0000’ //提示信息字体颜色
var buttonVal = ‘确定’; //确定按钮名称
var btnBgColor = ‘#409EFF’; //确定按钮背景颜色
var btnColor = ‘#fff’; //确定按钮字体颜色
var btnAlign = ‘center’; //按钮在水平位置,默认居中,变量值: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样式_第1张图片

你可能感兴趣的:(环境配置,服务器,javascript,前端,html)