Dialog 移动端弹窗 v2

前端

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

特性

  • 支持常见的 alert、confirm、toast、notice 四种类型弹窗
  • 可选择使用 IOS 或者 Material Design 风格的弹窗
  • 可自定义按钮的文字、样式、回调函数，支持多个按钮
  • 多个弹窗状态改变回调函数
  • 同时支持 jQuery 和 Zepto 库
  • 可扩展性强

新增

  • 弹窗可选 IOS 或者 Material Design 风格
  • 可自定义多个按钮
  • 按钮排版样式，并排或者堆叠
  • notice 弹窗的位置，居中或者底部

截图



示例

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

erweima

使用说明

1、引入 CSS 文件

1
<link rel="stylesheet" href="../css/dialog.css" />

2、引入 JS 文件

1
2
<script src="../lib/zepto.min.js"></script>
<script src="../js/dialog.js"></script>

3、HTML 结构

1
<button id="btn-01">显示弹窗</button>

4、实例化

1
2
3
4
5
$(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: 关闭后回调函数

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.
├─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

1
npm install

2、在本地运行项目

1
grunt serve



项目下载： Dialog2