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

MessageBox 弹框

MessageBox 的作用是替代系统自带的 alertconfirm ,仅适合展示较为简单的内容。如果需要弹出较为复杂的内容,请使用定制的弹窗。基本仿照ElementUI的同名组件。

原生,无依赖项,自适应布局,双端通用,如有弹窗层级问题需要自行调整。

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

效果预览

引用方式

html 复制代码
<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为取消按钮
相关推荐
lvchaoq6 分钟前
页面停留时间过长导致token过期问题
前端
兔老大的胡萝卜8 分钟前
pm2 部署nuxt4项目
javascript·nuxt4
阿蒙Amon11 分钟前
JavaScript学习笔记:17.闭包
javascript·笔记·学习
elangyipi12311 分钟前
深入理解前端项目中的 package.json 和 package-lock.json
前端·json
Wpa.wk13 分钟前
自动化测试 - 文件上传 和 弹窗处理
开发语言·javascript·自动化测试·经验分享·爬虫·python·selenium
l1t15 分钟前
利用小米mimo为精确覆盖矩形问题C程序添加打乱函数求出更大的解
c语言·开发语言·javascript·人工智能·算法
LYFlied23 分钟前
【算法解题模板】-【回溯】----“试错式”问题解决利器
前端·数据结构·算法·leetcode·面试·职场和发展
composurext24 分钟前
录音切片上传
前端·javascript·css
程序员小寒24 分钟前
前端高频面试题:深拷贝和浅拷贝的区别?
前端·javascript·面试
狮子座的男孩29 分钟前
html+css基础:07、css2的复合选择器_伪类选择器(概念、动态伪类、结构伪类(核心)、否定伪类、UI伪类、目标伪类、语言伪类)及伪元素选择器
前端·css·经验分享·html·伪类选择器·伪元素选择器·结构伪类