原生js自定义弹窗,纯js编写

下载地址：https://download.csdn.net/download/max_wcsdn/11803754

简介：maxs.alert.js是本人自主封装的一个弹窗工具，纯原生

下面介绍一些其使用方法：

i)    maxs.showToast(options)

maxs.showToast({
	msg:'加载中...', //提示文本
	outTime:2000 //显示时长,不设置时默认为1500毫秒
});

对应效果如右图： 

 

ii)    maxs.showLoading(options)

maxs.showLoading({
	msg:'加载中...',//提示文本，建议6个字符以内
	mask:true //是否显示背景阴影
});

对应效果如右图：

 

iii)    maxs.hideLoading()

maxs.hideLoading();//关闭loading

 

iv)    maxs.confirm(options,callBack)

maxs.confirm({
	title:'this is title',//提示标题
	msg:'open confirm', //提示内容
    //自定义按钮名称，不写此参数默认为['确定','取消']，从左到右为btn1,btn2
	btn:['确定','取消']
},function(result){//点击按钮后触发的方法
	if(result.btn1){
		maxs.showToast({msg:'btn1 click'});//toast不设置outTime时默认1500毫秒
	}else{
		maxs.showToast({msg:'btn2 click'});
	}
});

//result返回格式
{
    btn1:true,
    btn2:false
}

对应效果如右图：

 

v)    maxs.inputAlert(options,callBack)

maxs.inputAlert({
	//提示标题
	title:'please input content',
	//自定义按钮名称，不写此参数默认为['确定','取消']，从左到右为btn1,btn2
	btn:['确定','取消'],
	//reg:/^\d{5}$/    // 正则方式限制输入，正则方式只需要传入正则表达式
	reg:function(val){ // 函数方式限制输入，需要返回一个布尔值
		return /^\d{5}$/.test(value);
	}
},function(result){
	if(result.btn1){//若点击确定，则会在输入值合法时返回，否则不关闭弹窗
		maxs.showToast({msg:'输入值:' + result.value});
	}else{
		maxs.showToast({msg:'取消'});
	}
});

//返回值result
{
    btn1:true,
    btn2:false,
    value:'***'
}

对应效果如右图：

 

工具整体就这些了，欢迎小伙伴使用和吐槽，其中不足的希望各位大佬指导