示例展示

默认

$('#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);
});