移动端常用alert、confirm、toast等弹窗插件，兼容 jQuery/Zepto

khlbat 发布于2019-08-21 17:36 / 2673人阅读

移动端弹窗插件第二版，包括常见的 alert、confirm、toast、notice 四种类型弹窗，支持 jQuery 和 Zepto 库。

特性

支持常见的 alert、confirm、toast、notice 四种类型弹窗

可选择使用 IOS 或者 Material Design 风格的弹窗

可自定义按钮的文字、样式、回调函数，支持多个按钮

多个弹窗状态改变回调函数

同时支持 jQuery 和 Zepto 库

可扩展性强

新增

弹窗可选 IOS 或者 Material Design 风格

可自定义多个按钮

按钮排版样式，并排或者堆叠

notice 弹窗的位置，居中或者底部

截图

示例

查看效果，扫二维码或者移步→：demo示例

使用说明

1、引入 CSS 文件

2、引入 JS 文件

3、HTML 结构

4、实例化

$(document).on("click", "#btn-01", function() {
    var dialog1 = $(document).dialog({
        content: "Dialog 移动端弹窗插件的自定义提示内容",
    });
});

参数

参数	默认值	说明
type	"alert"	弹窗的类型。alert: 确定; confirm: 确定/取消; toast: 状态提示; notice: 提示信息
style	"default"	alert 与 confirm 弹窗的风格。 default: 根据访问设备平台; ios: ios 风格; android: MD design 风格
titleShow	true	是否显示标题
titleText	"提示"	标题文字
closeBtnShow	false	是否显示关闭按钮
content	""	弹窗提示内容, 值可以是 HTML 内容
contentScroll	true	alert 与 confirm 弹窗提示内容是否限制最大高度, 使其可以滚动
dialogClass	""	弹窗自定义 class
autoClose	0	弹窗自动关闭的延迟时间(毫秒)。 0: 不自动关闭; 大于0: 自动关闭弹窗的延迟时间
overlayShow	true	是否显示遮罩层
overlayClose	false	是否可以点击遮罩层关闭弹窗
buttonStyle	"side"	按钮排版样式。side: 并排; stacked: 堆叠
buttonTextConfirm	"确定"	确定按钮文字
buttonTextCancel	"取消"	取消按钮文字
buttonClassConfirm	""	确定按钮自定义 class
buttonClassCancel	""	取消按钮自定义 class
buttons	[]	confirm 弹窗自定义按钮组, 会覆盖"确定"与"取消"按钮; 单个 button 对象可设置 name [ 名称 ]、class [ 自定义class ]、callback [ 点击执行的函数 ]
infoIcon	""	toast 与 notice 弹窗的提示图标, 值为图标的路径。不设置=不显示
infoText	""	toast 与 notice 弹窗的提示文字, 会覆盖 content 的设置
position	"center"	notice 弹窗的位置, center: 居中; bottom: 底部

回调函数

函数	默认值	说明
onClickConfirmBtn	function(){}	点击“确定”按钮的回调函数
onClickCancelBtn	function(){}	点击“取消”按钮的回调函数
onClickCloseBtn	function(){}	点击“关闭”按钮的回调函数
onBeforeShow	function(){}	弹窗显示前的回调函数
onShow	function(){}	弹窗显示后的回调函数
onBeforeClosed	function(){}	弹窗关闭前的回调函数
onClosed	function(){}	弹窗关闭后的回调函数

方法

方法	说明
obj.close	关闭对话框。用法：dialogObj.close()
obj.update	更改 toast 和 notice 类型弹窗内容 ( 图标以及提示文字 ) 可传入参数： content: 弹窗内容, 可以是HTML infoIcon: 弹窗提示图标 infoText: 弹窗提示文字 autoClose: 自动关闭的延迟时间 onBeforeClosed: 关闭前回调函数 onClosed: 关闭后回调函数

目录结构

.
├─dist                # 项目发布资源目录, Grunt 生成
│  ├─css              # 项目 CSS 文件
│  ├─demos            # 项目示例页面
│  ├─images           # 项目 image 文件
│  ├─js               # 项目 JS 文件
│  │  ├─dialog.js     # 弹窗 JS
│  │  ├─dialog.min.js # 弹窗最小版本 JS
│  │  └─example.js    # 示例 JS
│  └─lib              # 公共 JS 文件
│
├─src                 # 实际进行开发的目录
│  ├─css              # 项目 CSS 文件, 由 Grunt 生成
│  ├─demos            # 项目示例页面
│  ├─images           # 项目 image 文件
│  ├─js               # 项目 JS 文件
│  │  ├─dialog.js     # 弹窗主要 JS
│  │  ├─example.js    # 示例 JS
│  │  ├─ripple.js     # 点击水波纹效果 JS
│  │  └─tapEvent.js   # 点击事件 JS
│  ├─lib              # 公共 JS 文件
│  ├─scss             # 项目相关 SCSS 文件
│  └─templates        # 初始静态 DMEO 资源目录
│
├─Gruntfile.js        # Grunt任务配置
├─_config.json        # Grunt配置所需信息
└─package.json        # 项目信息以及依赖

Grunt 使用方法

1、安装 Grunt

npm install

2、在本地运行项目

grunt serve

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89742.html

基于 Vue 2.0 实现的移动端弹窗 (Alert, Confirm, Toast)组件.

摘要：基于开发的插件包含仿照原生样式来源一些想法刚开始的时候想要用现成的弹窗组件来着但是查找一圈没有发现比较合适项目的所以才自己开发了一个包含四种并且可以单个引入的组件开发实际上比较简单有兴趣的可以看下源码实现步骤很清晰关于样式的问题是直接从魅 wc-messagebox 基于 vue 2.0 开发的插件包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生...

Darkgel 2019-08-21 11:41 评论0 收藏0
Vue.extend用法（主要用于需要动态渲染的组件，或者类似于window.alert() 提示

摘要：一简单的使用主要用于需要动态渲染的组件，或者类似于提示组件注意创建的是一个组件构造器，而不是一个具体的组件实例属于的全局，在实际业务开发中我们很少使用，因为相比常用的写法使用步骤要更加繁琐一些。最近在重构公司的项目，有些组件想要封装的更灵活，例如toast、loading、messageBox等弹窗组件，模仿了mint-ui封装此类组件的方式封装了自己的弹窗组件； mint-UI的t...

masturbator 2019-08-23 18:35 评论0 收藏0
移动端开发（使用webuploader上传图片,客户端交互,修改alert弹窗等）

摘要：之前实习做的一个移动端的页面需要的功能有图片上传点击客户端的返回按钮有提示即与客户端有交互遇到不少的坑总结一下问题图片上传功能使用工具百度的暂时遇到的坑删除图片实际上并没有完全删除需要自己在源码上添加详情看的提问上传的图片旋转角度有问题比之前实习做的一个移动端的页面需要的功能有图片上传点击客户端的返回按钮有提示(即与客户端有交互）遇到不少的坑总结一下问题 1.图片上传功能 ...

李昌杰 2019-08-19 17:26 评论0 收藏0
移动弹窗基础知识浅析——IOS弹窗体系

摘要：尤其是遇到二次确认等场景因此，打算从头整理移动弹窗的基础知识，以弹窗体系为切入点，从定义出发，对移动弹窗进行分类，然后分别分析每一类弹窗的应用场景，以及在使用过程中需要注意的点。摘要：最为常见的【弹窗】反而是最捉摸不定的东西。各种类型的弹窗傻傻分不清楚，不知道在什么场景下应该用哪种弹窗。尤其是遇到二次确认等场景…… 因此，打算从头整理移动弹窗的基础知识，以iOS弹窗体系为切入点，从...

jas0n 2019-06-28 10:58 评论0 收藏0
温故js系列（11）-BOM

摘要：确定和取消弹框，按确定返回，按取消或者关闭按钮返回。官方浏览器名返回所使用浏览器的名称。对象有一个属性，表示对象中的记录数。属性描述屏幕的宽度屏幕的高度窗口可以使用的屏幕的宽度窗口可以使用的屏幕的高度对象见温故系列前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：BOM JavaScript-BOM BO...

xorpay 2019-08-20 10:34 评论0 收藏0