JoyDialog 快速导航

使用说明

示例

使用说明
示例

默认

                                            
JoyDialog({
    content: '我是默认的弹窗。这里是提示信息内容'   
});

自定义标题

                                            
JoyDialog({
    titleText: '我是自定义标题',
    content: '自定义标题的弹窗。这里是弹窗的提示信息内容', 
});

无标题

                                            
JoyDialog({
    titleShow: false,
    content: '无标题的弹窗。这里是弹窗的提示信息内容', 
});

自动关闭

                                            
JoyDialog({
    autoClose: 2500,
    content: '自动关闭的弹窗。这里是弹窗的提示信息内容',
});

点遮罩层关闭

                                            
JoyDialog({
    overlayClose: true,
    content: '无标题的弹窗。这里是弹窗的提示信息内容', 
});

自定义按钮文字

                                            
JoyDialog({
    titleText: '发现新版本',
    content: '修复低版本安卓手机点透以及无法居中显示问题；去除CSS3启用GPU硬件加速',
    buttonTextConfirm: '现在升级',
    buttonTextCancel: '下次再说',
});

自定义按钮class

                                            
JoyDialog({
    content: '这里是弹窗的提示信息内容',
    buttonClassConfirm: 'custom-confirm',
    buttonClassCancel: 'custom-cancel',
});

按钮回调函数

                                            
JoyDialog({
    closeBtnShow: true,
    content: '这里是弹窗的提示信息内容',
    onClickConfirmBtn: function(){
        alert('你点了“确定”按钮'); 
        return false
    },
    onClickCancelBtn : function(){
        alert('你点了“取消”按钮');
    }
});

状态回调函数

                                            
JoyDialog({
    content: '这里是弹窗的提示信息内容',
    onBeforeShow: function() {
        alert('弹窗显示前执行~~');
    },
    onShow: function() {
        alert('弹窗显示后执行~~');
    },
    onBeforeClosed: function() {
        alert('弹窗关闭前执行~~');
    },
    onClosed: function() {
        alert('弹窗关闭后执行~~');
    }
});

弹窗风格-默认(按设备自动样式)

                                            
var div=$('<div>按访问设备显示的弹窗风格，这里是弹窗的提示信息内容</div>')
var dia = JoyDialog({
    style: 'default',  //  default、pc、mobile
    titleText: '弹窗风格',
    content: div,
    onClickConfirmBtn: function(){
        alert('你点了“确定”按钮');
        return false
    },
    onClickCancelBtn : function(){
        alert('你点了“取消”按钮');
    }
});
setTimeout(function(){
    div.html("按访问设备显示<br /><br /><br /><br /><br /><br /><br />")
},2000);

弹窗风格-pc(指定样式)

                                            
JoyDialog({
    style: 'pc',  //  default、pc、mobile
    titleText: '弹窗风格',
    content: '按访问设备显示的弹窗风格，这里是弹窗的提示信息内容',
});

弹窗风格-mobile(指定样式)

                                            
JoyDialog({
    style: 'mobile',  // default、pc、mobile
    titleText: '弹窗风格',
    content: '按访问设备显示的弹窗风格，这里是弹窗的提示信息内容',
    onClickConfirmBtn: function(){
        alert('你点了“确定”按钮');
        return false
    },
    onClickCancelBtn : function(){
        alert('你点了“取消”按钮');
    }
});

自定义多个按钮

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

按钮排版样式-default、并排

                                            
JoyDialog({
    titleText: '发现新版本',
    style: 'default',
    content: '修复低版本安卓手机点透以及无法居中显示问题；去除CSS3启用GPU硬件加速',
    buttonStyle: 'side',  
    buttons: [
        { name: '现在升级' },
        { name: '下次再说' },
        { name: '不再提醒' }
    ]
});

按钮排版样式-default、堆叠

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

按钮排版样式-mobile、并排

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

按钮排版样式-mobile、堆叠

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

按钮排版样式-pc、并排

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

按钮排版样式-pc、堆叠

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

Toast 类型-自定义图标

                                            
JoyDialog({
    type : 'toast',
    infoIcon: 'image/loading.gif',
    infoText: '正在加载中',
    autoClose: 2500
});

Toast 类型-无图标

                                            
JoyDialog({
    type : 'toast',
    infoText: '正在加载中',
    autoClose: 2500
});

Toast 类型 - loading

                                            
var jdia=JoyDialog({
    type : 'loading',
    infoText: '正在加载'
});
setTimeout(function(){
    jdia.close();
},3*1000)//

Toast 类型 - success

                                            
JoyDialog({
    type : 'toast_success',
    infoText: '执行成功'
});

Toast 类型 - warning

                                            
JoyDialog({
    type : 'toast_warning',
    infoText: '这是警告'
});

Toast 类型 - info

                                            
JoyDialog({
    type : 'toast_info',
    infoText: '执行完成'
});

Toast 类型 - error

                                            
JoyDialog({
    type : 'toast_error',
    infoText: '执行失败'
});

Toast 类型 - wind

                                            
JoyDialog({
    type : 'toast_wind',
    infoText: '遇到风险'
});

Toast 类型 - question

                                            
JoyDialog({
    type : 'toast_question',
    infoText: '这是个问题'
});

Toast 类型 - busy

                                            
JoyDialog({
    type : 'toast_busy',
    infoText: '服务器忙'
});

Notice 类型 - 图标加文字

                                            
JoyDialog({
    type : 'notice',
    infoIcon: 'image/loading.gif',
    infoText: '正在加载中',
    autoClose: 2500
});

Notice 类型 - 纯文字、顶部显示

                                            
JoyDialog({
    type : 'notice',
    infoText: '正在加载中',
    autoClose: 2500,
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});

Notice 类型 - info

                                            
JoyDialog({
    type : 'notice_info',
    infoText: '这是一个通知',
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});

Notice 类型 - success

                                            
JoyDialog({
    type : 'notice_success',
    infoText: '执行成功',
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});

Notice 类型 - warning

                                            
JoyDialog({
    type : 'notice_warning',
    infoText: '这是一个警告',
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});

Notice 类型 - error

                                            
JoyDialog({
    type : 'notice_error',
    infoText: '执行失败',
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});

Notice 类型 - 弹出多个

                                            
JoyDialog({
    type : 'notice_error',
    infoText: '执行失败',
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});
JoyDialog({
    type : 'notice_warning',
    infoText: '这是一个警告',
    autoClose:4000,
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});
JoyDialog({
    type : 'notice_success',
    infoText: '执行成功',
    autoClose:6000,
    position: 'top'  // top:顶部; center: 居中; bottom: 底部
});

方法调用

                                            
var jdia = JoyDialog({
    closeBtnShow: true,
    content: '这里是弹窗的提示信息内容',
    onClickConfirmBtn: function(){
        jdia.update({content:'这里是弹窗修改后的提示信息内容'});
        return false;//返回false 阻止弹出层点击确认按钮时自动关闭
    },
    onClickCancelBtn : function(){
        jdia.close();//手动关闭
        return false;//返回false 阻止弹出层点击取消按钮时自动关闭
    }
});

全局loading

                                            
//全局唯一loading,多次调用不重叠
JoyDialog.showLoading("正在加载");
//关闭loading
setTimeout(function(){
    JoyDialog.showLoading("正在加载1");
},1000)
//关闭loading
setTimeout(function(){
    JoyDialog.hideLoading();
    JoyDialog.hideLoading();
},50000)