Dialog

弹出对话框插件,支持 jQuery 和 Zepto

插件介绍

  • 支持四种类型的弹窗展示:alert、confirm、info、tips
  • 方便定制,可以自定义按钮的文字、样式、回调函数
  • 支持 jQuery 和 Zepto JavaScript工具库
  • 4 个状态事件,用来监听状态改变
  • 对话框默认样式主要针对移动端展示做优化

示例展示

默认

$('#btn-01').click(function(){
    $.dialog({
        contentHtml : '<p>我是默认弹出对话框示例展示。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

自动关闭

$('#btn-01').click(function(){
    $.dialog({
        autoClose : 2500,
        contentHtml : '<p>我是自动关闭的对话框示例展示。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

无标题

$('#btn-03').click(function(){
    $.dialog({
        showTitle : false,
        contentHtml : '<p>我是没有标题的对话框。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

自定义标题

$('#btn-04').click(function(){
    $.dialog({
        titleText : '自定义标题',
        contentHtml : '<p>我是自定义标题的对话框。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

Comfirm 类型

$('#btn-05').click(function(){
    $.dialog({
        type : 'confirm',
        contentHtml : '<p>我是confirm类型的对话框。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

Comfirm 类型, 自定义按钮文字

$('#btn-06').click(function(){
    $.dialog({
        type : 'confirm',
        buttonText : {
            ok : '自定义-确定',
            cancel : '自定义-取消'
        },
        contentHtml : '<p>我是confirm类型的对话框。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

Comfirm 类型, 按钮回调函数

$('#btn-07').click(function(){
    $.dialog({
       type : 'confirm',
       onClickOk : function(){
           alert('你点了确定~~');
       },
       onClickCancel : function(){        		
           alert('你点了取消~~');
       },
       contentHtml : '<p>我是confirm类型的对话框。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

Comfirm 类型, 状态回调函数

$('#btn-08').click(function(){
    $.dialog({
       type : 'confirm',
       onBeforeShow : function(){
           alert('显示前执行~~')
       },
       onShow : function(){
           alert('显示完成后执行~~')
       },
       onBeforeClosed : function(){
           alert('关闭前执行~~')
       },
       onClosed : function(){
           alert('关闭后执行,可以看页面title是否改变~~');
           document.title = '我已经关闭拉!';
       },
       contentHtml : '<p>我是confirm类型的对话框。</p> <p>我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。我只是用来占位的内容展示,仅仅用来占位撑起提示内容的高度。</p>'
    });
});

info 类型

$('#btn-09').click(function(){
    $.dialog({
       type : 'info',
       infoText : '加载中…',
       infoIcon : 'images/icon/loading.gif',
       autoClose : 2500
    });
});

info 类型, HTML创建内容

$('#btn-12').click(function(){
    $.dialog({
       type : 'info',
       contentHtml : '<img class="info-icon" src="images/icon/success.png" alt="操作成功" /><p class="info-text">操作成功</p>',
       autoClose : 2500
    });
});

info 类型, 更改状态

$('#btn-12').click(function(){
    var infoDialog = $.dialog({
        type : 'info',
        infoText : '加载中…',
        infoIcon : 'images/icon/loading.gif'			
    });

    window.setTimeout(function() {
        infoDialog.dialog.update({
	        autoClose : 1500,
	        infoText : '操作成功',
	        infoIcon : 'images/icon/success.png'
        });
    }, 2500);
});

Tips 类型

$('#btn-14').click(function(){
    var infoDialog = $.dialog({
        type : 'tips',
        infoText : '正在提交中…',
        infoIcon : 'images/icon/loading.gif'
    });    
});

使用指南

引用文件

CSS

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

JS

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

插件调用

$.dialog({
    contentHtml : '弹出对话框的内容部分'
});

API与参数

参数

参数 默认值 说明
type 'alert'

对话框的种类(alert-确定; confirm-确定/取消; info-带图标信息提示;tips-单行提示信息)

titleText '信息提示'

标题文字

showTitle true

是否显示标题。值为:true、false

contentHtml ''

主体部分的HTML内容。默认值为空

dialogClass ''

对话框自定义的 class。默认值为空

autoClose 0

自动关闭的延时时间(单位:毫秒)。为0时表示不自动关闭;大于0时,表示自动关闭对话框

overlayClose fasle

是否可点击遮罩层关闭对话框。值为:true、false

buttonText {
    ok : '确定',
    cancel : '取消'
}

按钮的文字

buttonClass {
    ok : '',
    cancel : ''
}

按钮的自定义 class

infoText ''

info 类型对话框的提示文字

infoIcon ''

info 类型对话框的提示图标。值为图标的路径

onClickOk function(){}

回调函数,点击“确定”按钮时执行

onClickCancel function(){}

回调函数,点击“取消”按钮时执行

onBeforeShow function(){}

回调函数,对话框显示前时执行

onShow function(){}

回调函数,对话框显示后时执行

onBeforeClosed function(){}

回调函数,对话框关闭前时执行

onClosed function(){}

回调函数,对话框关闭后时执行

方法

方法 说明
$.dialog.close

关闭对话框。用法:dialogObj.dialog.close()

$.dialog.update

更新info、tips类型对话框的状态(图标、提示文字),该方法可传入autoClose、infoText、infoIcon三个参数。
dialogObj.dialog.update({
     autoClose : 1500,
     infoText : '操作成功',
     infoIcon : 'images/icon/success.png'
})

浏览器支持

dialog 已经在 Internet Explorer 9+、Firefox 22+、Opera 9+、Google Chrome 和 Safari 浏览器上被验证过,并且应该可以再更多浏览器上工作。

移动浏览器(例如:Chrome mobile、 Safari mobile 和其它浏览器)也被支持。已经在 iOS (iPad、 iPhone、 iPod)、Android 设备上进行了测试。其他基于 Chrome 内核的移动浏览器也基本上支持。

下载插件
Fork me on GitHub