html5 confirm提示框,jquery-confirm | 功能强大的jQuery对话框和确认框插件
jquery-confirm是一款功能强大的jQuery对话框和确认框插件。它提供多种内置的主题效果，可以实现ajax远程加载内容，提供动画效果和丰富的配置参数等。它的特点还有：
可以使用键盘控制对话框。
通过ajax加载对话框的内容。
可以在指定时间之后自动关闭对话框。
提供丰富的参数和回调函数。
安装
可以通过Bower来安装该插件。
$ bower install craftpip/jquery-confirm
使用方法
基本调用
$.confirm({
confirm: function(){
console.log('the user clicked confirm');
},
cancel: function(){
console.log('the user clicked cancel');
}
});
全局默认参数
jconfirm.defaults = {
title: 'Hello',
content: 'Are you sure to continue?',
contentLoaded: function(){
},
icon: '',
confirmButton: 'Okay',
cancelButton: 'Close',
confirmButtonClass: 'btn-default',
cancelButtonClass: 'btn-default',
theme: 'white',
animation: 'zoom',
closeAnimation: 'scale',
animationSpeed: 500,
animationBounce: 1.2,
keyboardEnabled: false,
rtl: false,
confirmKeys: [13], // ENTER key
cancelKeys: [27], // ESC key
container: 'body',
confirm: function () {
},
cancel: function () {
},
backgroundDismiss: false,
autoClose: false,
closeIcon: null,
columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',
onOpen: function(){
},
onClose: function(){
},
onAction: function(){
}
};
配置参数
jquery-confirm插件的可用配置参数有：
参数
类型
默认值
描述
title
String
'Hello'
对话框的标题
content
String, Function
'Are you sure to continue?'
对话框的内容，也可以通过一个函数返回ajax内容
contentLoaded
function
function(){}
如果通过url前缀来调用内容，如url:http://abc.com/xyz，该参数将是回调函数
icon
String
''
标题前面的图标
confirmButton
String
'Okay'
确认按钮的文本
cancelButton
String
'Close'
取消按钮的文本
confirmButtonClass
String
'btn-default'
确认按钮的的class
cancelButtonClass
String
'btn-default'
取消按钮的class
theme
String
'white'
对话框的颜色主题，可选值有：'white', 'black', 'material' , 'bootstrap'
animation
String
'zoom'
打开对话框时的动画效果。可选值有： right, left, bottom, top, rotate, none, opacity, scale, zoom, scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse)
closeAnimation
String
'scale'
关闭对话框时的动画，和animation参数的可选值相同
animationSpeed
Number
500
动画的持续时间，单位毫秒
animationBounce
Float
1.2
打开对话框时添加弹性效果，1=没有弹性效果
keyboardEnabled
Boolean
false
使用回车键来确认，使用Esc键来取消
confirmKeys
Array
[13]
当使用keyboardEnabled参数时，可以设置一组键来触发确认事件，默认为13
cancelKeys
Array
[27]
当使用keyboardEnabled参数时，可以设置一组键来触发取消事件，默认为27
rtl
Boolean
false
使用从右到左的布局
container
String
'body'
指定生成的对话框代码被添加到哪里
confirm
Function
function(){}
用户点击了确认按钮之后的回调函数
cancel
Function
function(){}
用户点击了取消按钮之后的回调函数
backgroundDismiss
Boolean
false
是否允许点击对话框之外的区域来关闭对话框
autoClose
String
false
在指定的时间之后如果用户没有响应则自动关闭对话框。取值：'confirm|400'
closeIcon
Boolean
null
在对话框没有按钮的情况下，关闭按钮是可见的。将该参数设置为true可看见关闭按钮
closeIconClass
String
false
默认使用'X'作为关闭按钮，你可以通过该参数来修改
columnClass
String
'col-md-4 col-md-offset-4
col-sm-6 col-sm-offset-3
col-xs-10 col-xs-offset-1'
使用Bootstrap网格系统来进行布局
onOpen
Function
function(){}
当对话框元素被渲染之后触发
onClose
Function
function(){}
当对话框被关闭时触发
onAction
Function
function(){}
当任何指令被执行后都会触发该回调函数
watchInterval
Number
100
Watch the modal for changes and gets centered on the screen
API
通过var jc = $.confirm()会返回一个对象实例的引用。通过jc引用可以打开对话框。
var jc = $.confirm({title: 'awesome'}); // jc will be used in the examples below
jc.close()：关闭对话框。
var jc = $.confirm({
...
})
jc.close(); // destroy.
jc.isClosed()：返回对话框是否被关闭的布尔值。
jc.setTitle(string)：设置标题。
jc.setContent(string)：设置内容。
jc.setIcon(iconClass)：设置按钮。
jc.setDialogCenter()：将对话框居中显示。
jc.$body：别名：jc.$b，模态窗口对象。
jc.$content：别名：jc.contentDiv。可以通过该对象来访问对话框的内容。
var jc = $.confirm({
content: 'Yeah, this is awesome'
})
console.log(jc.$content.html()); // Yeah, this is awesom
jc.$title：可访问标题的对象。
jc.$icon：可访问图标的对象。
jc.$confirmButton：可访问确认按钮的对象。
jc.$cancelButton：可访问取消按钮的对象。
jc.$closeButton：可访问关闭按钮的对象。
jc.$target：可访问点击元素的对象。