html5自动弹窗 jq,jQuery弹窗对话框插件

许天逸
2023-12-01

这是一款jQuery弹窗对话框插件。该jquery弹窗插件可以用于做提示框,对话框,确认框等,兼容ie8,并提供点击按钮后的回调函数调用方法,非常好用。

使用方法

在页面中引入jquery、jquery.dialog.js和dialog.css文件。

创建一个基本的对话框

一个基本的对话框的调用方法如下。

$.dialog({

content: ''这是对话框的内容'

});

创建消息通知框

消息通知框有3个参数。

message:消息通知框显示的内容。

timeout:多少毫秒后自动关闭。

callback:关闭后的回调函数。

$.sendMsg('Notification Message', 3000, function(){

alert('close')

});

// or

$.sendSuccess('Success Message', 3000, function(){

alert('close')

});

$.sendWarning('Warning Message', 3000, function(){

alert('close')

});

$.sendError('Error Message', 3000, function(){

alert('close')

});

$.sendSuccessToTop('Sticky Success Message', 3000, function(){

alert('close')

});

$.sendWarningToTop('Sticky Warning Message', 3000, function(){

alert('close')

});

创建确认框

$.sendConfirm({

title: 'Confirm Dialog',

msg: 'Are U Sure?',

desc: 'Are U Sure to delete this entry?',

button: {

confirm: 'Okey',

cancel: 'Cancel'

},

onConfirm: function() {

console.log('Confirm');

},

onCancel: function() {

console.log('Cancel');

},

onClose: function() {

console.log('Close');

}

});

配置参数

全局配置参数和默认值如下:

{

id: '',

title: 'Title',

isFixed: true,

hideHeader: false,

hideClose: false,

content: null,

callback: null,

withNoPadding: false,

withNoMinWidth: false,

bgHide: true,

escHide: true

}

对话框的默认配置参数如下:

{

id: 'dialogConfirmBox',

title: 'Confirm',

hideHeader: false,

hideClose: false,

withCenter: false,

withIcon: false,

autoClose: false,

timeout: 3000,

width: null,

noconfirm: false,

msg: '',

desc: '',

content: '',

button: {

confirm: 'Okey', // {text:'Text', href:'#', target:'_blank',behavior:'behavior'}

cancel: 'Cancel', // {text:'Text', href:'#', target:'_blank',behavior:'behavior'}

cancelFirst: false

}

}

 类似资料: