MessageBox弹框替代系统自带的alert、confirm -- 高仿ElementUI MessageBox

MessageBox 弹框

MessageBox 的作用是替代系统自带的 alert、confirm ，仅适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用定制的弹窗。基本仿照ElementUI的同名组件。
原生，无依赖项，自适应布局，双端通用，如有弹窗层级问题需要自行调整。

git仓库地址：https://gitee.com/amswait/message-box、

效果预览

引用方式

<script src="/message-box.min.js"></script>

注意：需要确保CSS文件在JS同级目录；

API

• messageBox：访问核心弹窗对象。

• $close：关闭弹窗的方法。

• $alert：显示带有消息和确认按钮的提示框。

• $confirm：显示带有消息、确认和取消按钮的确认框。

options

配置项	类型	是否必填	示例	是否可传入HTML代码
msg	String	是	$alert('测试文案')	$alert('<strong>这是 <i>HTML</i> 片段</strong>')
title	String	否	$alert('测试', '测试标题')|	同上
options	Object	否
options.confirmButtonText	String	否	$confirm("测试",null,{confirmButtonText:"确认文案"})	同上
options.cancelButtonText	String	否	$confirm("测试",null,{cancelButtonText:"取消文案"})	同上
options.callback	Function	否	$confirm("测试",void 0,{callback:function(result, type){$alert('结果：'+ result+' 触发按钮类型：'+type)}});

options.callback出参说明

参数名	含义
result	确认的结果：点击关闭按钮与取消按钮为false，点击确认按钮为true
type	触发事件的按钮类型：close为关闭按钮，confirm为确认按钮，cancel为取消按钮