sufangyu / Dialog2

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

特性

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

新增

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

截图

示例

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

使用说明

1、引入 CSS 文件

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

2、引入 JS 文件

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

3、HTML 结构

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

4、实例化

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

参数

    <tr>
        <td>infoIcon</td>
        <td>''</td>
        <td>toast 与 notice 弹窗的提示图标, 值为图标的路径。不设置=不显示</td>
    </tr>
    <tr>
        <td>infoText</td>
        <td>''</td>
        <td>toast 与 notice 弹窗的提示文字, 会覆盖 content 的设置</td>
    </tr>
    <tr>
        <td>position</td>
        <td>'center'</td>
        <td>notice 弹窗的位置, center: 居中; bottom: 底部</td>
    </tr>

    
</tbody>

回调函数

</tbody>

方法

目录结构

.
├─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 内容不可以再滚动配置项；

全部更新日志