Dialog 移动端弹窗

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

下载插件 关注 GitHub

插件概述

说明

特性

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

兼容性

  • Chrome、Firefox 22+、Opera 9+、Safari、IE10+
  • Android 4.0+ (Android 2.3 弹窗动画不够顺畅)
  • iOS 8+
使用与示例

使用说明

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 移动端弹窗插件的自定义提示内容',
    });
});

示例

默认

$(document).on('click', '#btn-01', function() {
    $(document).dialog({
        content: '我是默认的弹窗。这里是提示信息内容',
    });
});

自定义标题

$(document).on('click', '#btn-02', function() {
    $(document).dialog({
        titleText: '我是自定义标题',
        content: '自定义标题的弹窗。这里是弹窗的提示信息内容',
    });
});

无标题

$(document).on('click', '#btn-03', function() {
    $(document).dialog({
        titleShow: false,
        content: '无标题的弹窗。这里是弹窗的提示信息内容',
    });
});

自动关闭

$(document).on('click', '#btn-04', function() {
    $(document).dialog({
        autoClose: 2500,
        content: '自动关闭的弹窗。这里是弹窗的提示信息内容',
    });
});

点遮罩层关闭

$(document).on('click', '#btn-05', function() {
    $(document).dialog({
        overlayClose: true,
        content: '可以点击遮罩层关闭的弹窗。这里是弹窗的提示信息内容',
    });
});

Comfirm 类型

$(document).on('click', '#btn-06', function() {
    $(document).dialog({
        type: 'comfirm',
        content: 'confirm 类型的弹窗。这里是弹窗的提示信息内容',
    });
});

Comfirm 类型, 自定义按钮文字

$(document).on('click', '#btn-07', function() {
    $(document).dialog({
        type : 'confirm',
        titleText: '发现新版本'
        content: '修复低版本安卓手机点透以及无法居中显示问题；去除CSS3启用GPU硬件加速',
        buttonTextConfirm: '现在升级',
        buttonTextCancel: '下次再说',
    });
});

Comfirm 类型, 自定义按钮class

$(document).on('click', '#btn-08', function() {
    $(document).dialog({
        type : 'confirm',
        content: 'confirm 类型的弹窗。这里是弹窗的提示信息内容',
        buttonClassConfirm: 'custom-confirm',
        buttonClassCancel: 'custom-cancel',
    });
});

Comfirm 类型, 按钮回调函数

$(document).on('click', '#btn-09', function() {
    $(document).dialog({
        type : 'confirm',
        closeBtnShow: true,
        content: 'confirm 类型的弹窗。这里是弹窗的提示信息内容',
        onClickConfirmBtn: function(){
            alert('你点了“确定”按钮');
        },
        onClickCancelBtn : function(){
            alert('你点了“取消”按钮');
        },
        onClickCloseBtn  : function(){
            alert('你点了“关闭”按钮');
        }
    });
});

Comfirm 类型, 状态回调函数

$(document).on('click', '#btn-10', function() {
    $(document).dialog({
        type : 'confirm',
        content: 'confirm 类型的弹窗。这里是弹窗的提示信息内容',
        onBeforeShow: function() {
            alert('弹窗显示前执行~~');
        },
        onShow: function() {
            alert('弹窗显示后执行~~');
        },
        onBeforeClosed: function() {
            alert('弹窗关闭前执行~~');
        },
        onClosed: function() {
            alert('弹窗关闭后执行~~');
        }
    });
});

弹窗风格

$(document).on('click', '#btn-style-01', function() {
    $(document).dialog({
        type : 'confirm',
        style: 'default',  // default、ios、android
        titleText: '弹窗风格',
        content: '按访问设备显示的弹窗风格，这里是弹窗的提示信息内容',
    });
});

自定义多个按钮

$(document).on('click', '#btn-buttons-02', function() {
    $(document).dialog({
        type : 'confirm',
        style: 'android',
        titleText: '发现新版本',
        content: '修复低版本安卓手机点透以及无法居中显示问题；去除CSS3启用GPU硬件加速',
        buttons: [          
            {
                name: '不再提醒',
                callback: function() {
                    alert('你选择了“不再提醒”');
                }
            },
            {
                name: '下次再说',
                callback: function() {
                    alert('你选择了“下次再说”');
                }
            },
            {
                name: '现在升级',
                class: 'dialog-btn-hl',
                callback: function() {
                    alert('你选择了“现在升级”');
                }
            }
        ]
    });
});

按钮排版样式

$(document).on('click', '#btn-buttonStyle-01', function() {
    $(document).dialog({
        type : 'confirm',
        style: 'ios',
        titleText: '发现新版本',
        content: '修复低版本安卓手机点透以及无法居中显示问题；去除CSS3启用GPU硬件加速',
        buttonStyle: 'stacked',  // side: 并排; stacked: 堆叠
        buttons: [
            { name: '现在升级' },
            { name: '下次再说' },
            { name: '不再提醒' }
        ]
    });
});

Toast 类型

$(document).on('click', '#btn-11', function() {
    $(document).dialog({
        type : 'toast',
        infoIcon: '../images/icon/loading.gif',
        infoText: '正在加载中',
        autoClose: 2500
    });
});

Toast 类型, content创建内容

$(document).on('click', '#btn-15', function() {
    $(document).dialog({
        type : 'toast',
        content: '<img class="info-icon" src="../images/icon/loading.gif" /><span class="info-text">正在加载中</span>',
        autoClose: 2500
    });
});

Toast 类型, 状态更改

$(document).on('click', '#btn-16', function() {
    var toast5 = $(document).dialog({
        type : 'toast',
        infoIcon: '../images/icon/loading.gif',
        infoText: '正在加载中',
    });

    setTimeout(function () {
        toast5.update({
            infoIcon: '../images/icon/success.png',
            infoText: '加载成功',
            autoClose: 2500,
        });
    }, 3000);
});

Toast 类型, 弹窗类型更改

$(document).on('click', '#btn-17', function() {
    var toast6 = $(document).dialog({
        type : 'toast',
        infoIcon: '../images/icon/loading.gif',
        infoText: '正在加载中',
    });

    setTimeout(function () {
        toast6.close();
        $(document).dialog({
            content: '加载失败！请重新再试',
        });
    }, 2500);
});

Notice 类型

$(document).on('click', '#btn-17', function() {
    $(document).dialog({
        type : 'notice',
        infoIcon: '../images/icon/loading.gif',
        infoText: '正在加载中',
        autoClose: 2500
    });
});

$(document).on('click', '#btn-21', function() {
    $(document).dialog({
        type : 'notice',
        infoText: '正在提交中',
        autoClose: 2500,
        position: 'bottom'  // center: 居中; bottom: 底部
    });
});

Notice 类型，content创建内容

$(document).on('click', '#btn-22', function() {
    $(document).dialog({
        type : 'notice',
        content: '<img class="info-icon" src="../images/icon/loading.gif" alt="" /><span class="info-text">正在提交中</span>',
        autoClose: 2500
    });
});

Notice 类型，状态更改

$(document).on('click', '#btn-23', function() {
    var notice5 = $(document).dialog({
        type : 'notice',
        infoIcon: '../images/icon/loading.gif',
        infoText: '正在加载中'
    });

    setTimeout(function () {
        notice5.update({
            infoIcon: '../images/icon/success.png',
            infoText: '加载成功！！',
            autoClose: 2500
        });
    }, 3000);
});
API

参数

参数 默认值 说明
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: 关闭后回调函数