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为取消按钮 |
相关文章:
MessageBox弹框替代系统自带的alert、confirm -- 高仿ElementUI MessageBox
MessageBox 弹框 MessageBox 的作用是替代系统自带的 alert、confirm ,仅适合展示较为简单的内容。如果需要弹出较为复杂的内容,请使用定制的弹窗。基本仿照ElementUI的同名组件。 原生,无依赖项,自适应布局,双端通用&…...
数据结构一排序算法
排序算法总结 冒泡排序 冒泡排序(Bubble Sort)也是一种简单直观的排序算法。假设长度为n的数组arr,要按照从小到大排序。则冒泡排序的具体过程可以描述为:首先从数组的第一个元素开始到数组最后一个元素为止,对数组中…...
[Leetcode 215][Medium]-数组中的第K个最大元素-快排/小根堆/堆排序
一、题目描述 原题地址 二、整体思路 (1)快排 对于SELECT K问题,可以通过三路快排解决,快排可以把一个元素放至按升序排序的数组正确的位置,左边为小于该元素的元素集合,右边为大于该元素的元素集合。 三…...
【栈和队列】常见面试题
文章目录 1.[有效的括号](https://leetcode.cn/problems/valid-parentheses/description/)1.1 题目要求1.2 利用栈解决 2. [用队列实现栈](https://leetcode.cn/problems/implement-stack-using-queues/description/)2.1 题目要求2.2 用队列实现栈 3.[用栈实现队列](https://le…...
关于float浮点值二进制存储和运算精度损失的话题
1.前言 浮点值的存储、运算都可能会带来精度损失,了解精度损失背后的机制原因方便我们更好的了解什么情况下会发生精度损失、什么情况下精度损失较大,以及思考怎么避免或减少精度损失。 2.知识点 (1)IEEE 754标准 EEE 754标准…...
python爬虫学习记录-请求模块urllib3
(文章内容仅作学习交流使用) urllib3是一个功能强大、条理清晰,用于HTTP客户端的第三方模块 urllib3-发送网络请求 使用urllib3发送网络请求时,需要先创建PoolManager对象,并使用该对象的request方法发送请求&#…...
谷粒商城实战笔记-133~135-城业务-商品上架-远程上架接口
文章目录 一,谷粒商城实战笔记-133-城业务-商品上架-远程上架接口1,开发目标2,详细设计2.1,提前建立索引2.2,构造批量操作请求参数2.3,使用HighLevelClient调用bulk请求保存数据 二,134-商城业务…...
【React】详解 App.js 文件
文章目录 一、App.js文件的基本结构1. 引入必要的模块2. 定义根组件3. 导出根组件 二、App.js文件的详细解析1. 函数组件与类组件函数组件类组件 2. 使用CSS模块3. 组织子组件4. 管理组件状态使用useState钩子使用state对象 三、App.js文件的最佳实践1. 保持组件的简洁和模块化…...
【ML】self-supervised Learning for speech and Image
【ML】self-supervised Learning for speech and Image 1. self-supervised Learning for speech and Image1.1 自监督学习在语音处理领域的方法及其特点1.2 自监督学习在图像处理领域的方法及其特点 2. Predictive Approach2.1 特点2.2 适用场景 3. contrastive Learning4. 语…...
青岛实训day24(8/8)
一.Python环境准备 1.查看有没有python3 yum list installed |grep python yum list |grep python3 最新安装3.12可以使用源码安装 2.下载安装python3 yum -y install python3 3.查看版本 [rootpython ~]# python3 --version Python 3.6.8 4.进入编辑 [r…...
*算法训练(leetcode)第四十五天 | 101. 孤岛的总面积、102. 沉没孤岛、103. 水流问题、104. 建造最大岛屿
刷题记录 101. 孤岛的总面积DFSBFS 102. 沉没孤岛DFSBFS *103. 水流问题*104. 建造最大岛屿 101. 孤岛的总面积 题目地址 本题要求不与矩阵边缘相连的孤岛的总面积。先将与四个边缘相连的岛屿变为海洋,再统计剩余的孤岛的总面积。无需再标识访问过的结点ÿ…...
设计模式 由浅入深(待完结)
一、设计模式是什么? 设计模式是指在软件开发中,经过验证的,用于解决在特定环境下,重复出现的,特定问题的解决方案。 二、设计模式有哪些? 1. 观察者模式 定义对象间的一种一对多(变化&#x…...
(第34天)645、最大二叉树
目录 645、最大二叉树题目描述思路代码 645、最大二叉树 题目描述 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点,其值为 nums 中的最大值。 递归地在最大值 左边 的 子数组前缀上 构建左子树。 递归地在最大…...
Python知识点:如何使用Paramiko进行SSH连接与操作
使用Paramiko进行SSH连接与操作可以分为以下几个步骤: 安装Paramiko: 首先需要安装Paramiko库,可以使用pip进行安装: pip install paramiko建立SSH连接: 使用Paramiko连接远程服务器,需要提供服务器的地址、…...
代码随想录算法训练营第六天(一)|242.有效的字母异位词
LeetCode 242 有效的字母异位词 题目: 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词。 注意:若 s 和 t 中每个字符出现的次数都相同,则称 s 和 t 互为字母异位词。 示例 1: 输入: s "anagram&q…...
数据结构 | 考研代码题之顺序表 | 1 查找L中值为e的数据元素若找到则返回其下标,若找不到则返回-1
文章目录 1 题目2 题解 1 题目 假设有一个顺序表 L,其存储的所有数据元素均为不重复的正数,查找L中值为e的数据元素,若找到则返回其下标,若找不到则返回-1。 2 题解 C语言代码: /*假设有一个顺序表 L,其…...
RLVF:避免过度泛化地从口头反馈中学习
人工智能咨询培训老师叶梓 转载标明出处 大模型在不同行业和个人中的广泛应用要求模型能够根据具体的用户反馈进行调整或定制,以满足细微的要求和偏好。虽然通过高层次的口头反馈来指定模型调整非常方便,例如“在给老板起草电子邮件时不要使用表情符号”…...
设计原则与思想-从项目实战中学习设计模式
文章目录 开源项目通过剖析Java JDK源码学习灵活应用设计模式1. 单例模式(Singleton Pattern)示例:`java.lang.Runtime`2. 工厂模式(Factory Pattern)示例:`java.util.Date`3. 观察者模式(Observer Pattern)示例:`java.util.Observable` 和 `java.util.Observer`4. 适…...
python中的类属性、实例属性、类方法、实例方法和静态方法
1. 类属性(类变量)和实例属性(实例变量) 在python中,类中的属性就是定义在类中的变量,简称成员变量;类中的行为就是定义在类中的方法,简称成员方法。成员变量又可分为类变量和实例变量,或者分为类属性和实例属性。成员…...
A股继续底部震荡,探底是否能成功?
真心的给股民朋友提个醒,不管你胆大还是胆怯,盘面上出现了1个反常信号,一起来看看: 1、今天两市低开高走,开始筑底了,任何一个主力,都是在无人问津的熊市布局,而在人声鼎沸的牛市离场…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先,你可以运行以下命令查看可用版本: apt-cache madison nginx-core输出示例: nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而,传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案,能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版,莫兰迪调色板清新简约工作汇报PPT模版,莫兰迪时尚风极简设计PPT模版,大学生毕业论文答辩PPT模版,莫兰迪配色总结计划简约商务通用PPT模版,莫兰迪商务汇报PPT模版,…...
Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统
💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「storms…...
数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...
Linux基础开发工具——vim工具
文章目录 vim工具什么是vimvim的多模式和使用vim的基础模式vim的三种基础模式三种模式的初步了解 常用模式的详细讲解插入模式命令模式模式转化光标的移动文本的编辑 底行模式替换模式视图模式总结 使用vim的小技巧vim的配置(了解) vim工具 本文章仍然是继续讲解Linux系统下的…...
计算机系统结构复习-名词解释2
1.定向:在某条指令产生计算结果之前,其他指令并不真正立即需要该计算结果,如果能够将该计算结果从其产生的地方直接送到其他指令中需要它的地方,那么就可以避免停顿。 2.多级存储层次:由若干个采用不同实现技术的存储…...
