https://github.com/sufangyu/dialog2
移动端弹窗插件第二版，包括常见的 alert、confirm。toast、notice 四种类型弹窗，支持 jQuery 和 Zepto 库。（已停止维护，请使用vue、react 等新框架）
https://github.com/sufangyu/dialog2
dialog jquery-zepto js mobile
Last synced: 3 months ago
JSON representation
移动端弹窗插件第二版，包括常见的 alert、confirm。toast、notice 四种类型弹窗，支持 jQuery 和 Zepto 库。（已停止维护，请使用vue、react 等新框架）
- Host: GitHub
- URL: https://github.com/sufangyu/dialog2
- Owner: sufangyu
- Created: 2016-10-12T06:27:33.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-04-13T08:09:51.000Z (about 8 years ago)
- Last Synced: 2023-11-07T16:59:05.022Z (over 2 years ago)
- Topics: dialog, jquery-zepto, js, mobile
- Language: CSS
- Homepage:
- Size: 118 KB
- Stars: 325
- Watchers: 16
- Forks: 96
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: Changelog.md
Awesome Lists containing this project
README
移动端弹窗插件第二版，包括常见的 alert、confirm。toast、notice 四种类型弹窗，支持 jQuery 和 Zepto 库。
### 特性
+ 支持常见的 alert、confirm、toast、notice 四种类型弹窗
+ 可选择使用 IOS 或者 Material Design 风格的弹窗
+ 可自定义按钮的文字、样式、回调函数，支持多个按钮
+ 多个弹窗状态改变回调函数
+ 同时支持 jQuery 和 Zepto 库
+ 可扩展性强
### 新增
+ 弹窗可选 IOS 或者 Material Design 风格
+ 可自定义多个按钮
+ 按钮排版样式，并排或者堆叠
+ notice 弹窗的位置，居中或者底部
### 截图
## 示例
查看效果，扫二维码或者移步→：[demo示例](http://sufangyu.github.io/project/dialog2/dist/demos/)
## 使用说明
**1、引入 CSS 文件**
```css
```
**2、引入 JS 文件**
```javascript
```
**3、HTML 结构**
```html
显示弹窗
```
**4、实例化**
```javascript
$(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
'提示'
标题文字
bodyNoScroll
false
body 内容不可以滚动
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
```
**3、grunt 命令**
```
grunt serve // 浏览 Demo: 本地服务器
grunt dist // 开发环境: 生产实际项目使用代码
grunt src // 开发环境: 本地服务器; 实时刷新
```
## 最新版本
### 2.1.0 (2018-04-12)
+ 增加 弹窗支持按钮点击后不关闭；
+ 增加 弹窗显示后，body 内容不可以再滚动配置项；
[全部更新日志](https://github.com/sufangyu/dialog2/blob/master/Changelog.md)