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

自定义弹窗,纯js编写"/>

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

下载地址：

简介：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,btn2btn:['确定','取消']
},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,btn2btn:['确定','取消'],//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:'***'
}

对应效果如右图：

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