ajax 确认对话框,jquery-confirm | 功能强大的jQuery对话框和确认框插件
Quick features
These features can practically be used like so.
Alerts
Elegant Alerts.
Confirmation
Stacked Confirmations
Act like Prompt
Need input?
Background dismiss
Not so important modal
Using as dialogs/modals
Its also a Dialog.
Asynchronous content
Loading from remote places
Auto-close
Some actions maybe critical
Keystrokes
Keyboard actions?
Alignment
Automatically centered
Images
Loading images
Animations
Clean animations
Quick Usage
Dependencies:
Bootstrap by Twitter >= v2
jQuery library > v1.8
Alert
$.alert() Has only confirm button.
example alert
$.alert({
title: 'Alert!',
content: 'Simple alert!',
confirm: function(){
$.alert('Confirmed!'); // shorthand.
}
});
Confirm
$.confirm() Has both confirm & cancel buttons.
example confirm
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
confirm: function(){
$.alert('Confirmed!');
},
cancel: function(){
$.alert('Canceled!')
}
});
HTML
Javascript
$('a.twitter').confirm(options);
The alias $.confirm was made to emulate the native confirm().
By default on "confirm" the window will be redirected to the href provided, but if the `options` has the confirm callback, it will be called instead. Use this.$target to get the clicked element.
Dialog
$.dialog() Hides both confirm & cancel buttons. (Shows close [x] button)
example dialog
$.dialog({
title: 'Text content!',
content: 'Simple modal!',
});
Shorthand usage
The shorthand thingy takes in two string arguments, first one is the content of the dialog and second the title of the dialog.
The second argument is optional.
$.alert('Content here', 'Title here');
$.confirm('A message', 'Title is optional');
$.dialog('Just to let you know');
Customizing
NOTE:
The $.confirm(), $.dialog() & $.alert() methods are alias of jconfirm().
All three methods indirectly call the jconfirm base function altering the provided options.
ADVANCED: this.$body is the body div for jquery-confirm. You can find and alter any element at run time.
Button text
Change the button text for confirm and cancel.
click me!
$.confirm({
confirmButton: 'Yes i agree',
cancelButton: 'NO never !'
});
Button style
Apply the classes you want in the buttons.
Available bootstrap options are btn-primary btn-inverse btn-warning btn-info btn-danger btn-success
info and danger!
warning and success!
$.confirm({
confirmButtonClass: 'btn-info',
cancelButtonClass: 'btn-danger'
})
Hide elements
Hide the Title/Content/Confirm Button/Cancel Button/Close icon when u don't need them.
No title
No content
No title/cancel Button
No title/cancel/confirm Button
No title/cancel/confirm Button + no close icon
$.confirm({
title: false, // hides the title.
cancelButton: false // hides the cancel button.
confirmButton: false, // hides the confirm button.
closeIcon: false, // hides the close icon.
content: false, // hides content block.
});
NOTE:
By default the closeIcon is visible if both confirm & cancel buttons are hidden. (dialog mode).
To explicitly show or hide closeIcon set closeIcon: true or closeIcon: false.
Shorthand to hide both buttons is to use $.dialog().
Custom width
Jquery-confirm uses bootstrap's grid system for its layout.
You can simply provide column classes to adjust the modal's width.
You can also set responsive layouts. Bootstrap grid docs
col-md-6 col-md-offset-3
col-md-4 col-md-offset-4 (default)
col-md-4
col-md-4 col-md-offset-8
col-md-12
$.confirm({
columnClass: 'col-md-4 col-md-offset-4'
});
$.confirm({
columnClass: 'col-md-4'
});
$.confirm({
columnClass: 'col-md-4 col-md-offset-8 col-xs-4 col-xs-offset-8'
});
Icons
Give meaning to your dialog with custom icons.
Read about Font Awesome here.
Using bootstrap's glyphicon
Using font-awesome
Animated font-awesome
$.confirm({
icon: 'glyphicon glyphicon-heart',
title: 'glyphicon'
});
$.confirm({
icon: 'fa fa-warning',
title: 'font-awesome'
});
$.alert({
icon: 'fa fa-spinner fa-spin',
title: 'Working!',
content: 'Sit back, we are processing your request.
The animated icon is provided by Font-Awesome!'
});
Close icon
jQuery confirm uses × html entity for this close symbol, however you can use Any icon of your choice (fa, glyphicon, zmdi)
Using $.dialog will show the close Icon by default.
With closeIcon
$.alert({
closeIcon: true
});
Using your own class for icons.
Using glyphicon
Using font awesome
$.alert({
closeIcon: true,
closeIconClass: 'fa fa-close' // or 'glyphicon glyphicon-remove'
});
Animations
Impression lies in what we see.
Different animations can be set for open and close events.
2D animations:
right
left
bottom
top
Rotate
none
opacity
3D animations:
scale (default)
zoom
scaleY
scaleX
RotateY
RotateYR
RotateX
RotateXR
$.confirm({
animation: 'zoom',
closeAnimation: 'scale'
});
// Available animations:
// right, left, bottom, top, rotate, none, opacity, scale, zoom,
// scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse)
Animation bounce
Some eye candy thats in fashion.
No bounce
1.5 bounce
2 bounce
2.5 bounce
$.confirm({
animationBounce: 1.5, // default is 1.2 whereas 1 is no bounce.
});
Animation speed
Adjust the duration of animation.
I'm too Late
I'm too Quick
$.confirm({
animationSpeed: 2000 // 2 seconds
});
$.confirm({
animationSpeed: 200 // 0.2 seconds
});
Themes
The Light & Dark themes that suit any website design,
Light theme
Dark theme
Supervan
Material
Bootstrap
$.confirm({
theme: 'white'
});
$.confirm({
theme: 'black'
});
$.confirm({
theme: 'supervan' // 'material', 'bootstrap'
});
Ajax loading
With jconfirm you have the power to load content directly when needed via ajax, no extra code.
Two methods are available to load content via Ajax:
Pass in String content the URL with "URL:" prepended.
Eg: content: "URL:http://example.com/getData?id=1"
Pass in Function that returns a jQuery ajax promise.
Eg: content: function(){ return $.get(...); }
The confirm / cancel buttons are disabled until the Ajax call is complete.
Using the "URL:" prefix
Using the url prefix is the quick way, however has some limitations like you cannot modify the ajax call's method, dataType, etc.
To use, prepend your URL with "URL:" ends up like "URL:http://example.com/file.extension".
When the call is complete the contentLoaded function is run with arguments Data, Status & Xhr object.
Load from text.txt
view text.txt
$.confirm({
content: 'url:text.txt',
title: 'Title'
});
The content is set before contentLoaded is called.
Using contentLoaded callback
$.confirm({
content: 'url:text.txt',
title: 'Title',
contentLoaded: function(data, status, xhr){
var self = this;
setTimeout(function(){
self.setContent('
OK! the status is: ' + status + '
' + self.content);
self.setTitle('Stuff is loaded');
}, 2000);
}
});
Using Ajax promise
This option provides full control over the ajax options and what data is to be inserted.
The content takes a function that returns a jQuery promise ($.ajax, $.get, $.post, etc.).
In this example a json object is requested, and a part of it is set as content.
Load from bower.json
view bower.json
$.confirm({
content: function () {
var self = this;
return $.ajax({
url: 'bower.json',
dataType: 'json',
method: 'get'
}).done(function (response) {
self.setContent('Description: ' + response.description);
self.setContent(self.content + '
Version: ' + response.version); // appending
self.setTitle(response.name);
}).fail(function(){
self.setContent('Something went wrong.');
});
},
confirm: function(){
this.setContent( this.content + '
Adding a new sentence.
');return false; // prevent modal from closing
}
});
Auto close
Do a action if the user does not respond within the specified time.
This comes in handly when the user is about to do something critical.
The autoClose option takes in a string, like 'confirm|4000' where confirm is the action to trigger after 4000 milliseconds.
Practical examples of autoClose
Auto Cancel.
Auto Confirm.
$.confirm({
title: 'Delete user?',
content: 'This dialog will automatically trigger \'cancel\' in 6 seconds if you don\'t respond.',
autoClose: 'cancel|6000',
confirm: function(){
alert('confirmed');
},
cancel:function(){
alert('canceled');
}
});
$.confirm({
title: 'Logout?',
content: 'Your time is out, you will be automatically logged out in 10 seconds.',
autoClose: 'confirm|10000',
confirm: function(){
alert('confirmed');
},
cancel:function(){
alert('canceled');
}
});
Background dismiss
Whether the user can close the dialog by clicking outside the modal.
The 'cancel' action is trigged if the user click outside of the dialog.
Allow backgroundDismiss
Disallow backgroundDismiss
$.confirm({
backgroundDismiss: true,
content: 'Click outside the dialog, and i shall close!'
});
$.confirm({
backgroundDismiss: false,
content: 'Click outside the dialog, and i will shake it off like taylor swift.'
});
Keyboard actions
Enables keyboard events on jquery-confirm dialog.
ENTER calls confirm(); & ESC calls cancel();
Keyboard Enabled
$.confirm({
keyboardEnabled: true,
content: 'Press ESC or ENTER to see it in action.',
cancel: function(){
$.alert('canceled');
},
confirm: function(){
$.alert('confirmed');
}
});
Setting custom keys
The confirmKeys, cancelKeys take an array of key numbers, in this example 65 is 'A' & 66 is 'B'.
If the modal has input elements, ENTER & SPACE buttons will not do anything for the focused input (when the user is typing)
Using custom keys like 'A' or 'B' when you have input elements inside the modal will cause the modal to close when user types those keys.
With custom keys
$.confirm({
keyboardEnabled: true,
content: 'Press "A" to confirm or "B" to cancel. ',
confirmKeys: [65],
cancelKeys: [66],
cancel: function () {
$.alert('canceled');
},
confirm: function () {
$.alert('confirmed');
}
});
RTL support
If you need to show the confirm box in rtl then you should set the rtl option to true.
Try RTL
$.alert({
title: 'پیغام',
content: 'این یک متن به زبان شیرین فارسی است',
confirmButton: 'تایید',
cancelButton: 'انصراف',
confirmButtonClass: 'btn-primary',
closeIcon: true, // close icon will be moved to left if RTL is set to true.
rtl: true,
confirm: function () {
alert('تایید شد.');
}
});
Callbacks
Get more control over the modal, mainly important for binding events for the modal elements.
contentLoaded callback is called when data from URL prefix in content is used.
With Callbacks
$.confirm({
content: 'Imagine this is a complex form and you have to attach events all over the form or any element
' +
'I\'ve events attached!',
onOpen: function(){
alert('after the modal is opened/rendered');
// find the input element and attach events to it.
// NOTE: `this.$content` is the jquery object for content.
this.$content.find('button.examplebutton').click(function(){
alert('I\'ve powers!');
});
},
onClose: function(){
alert('before the modal is closed');
},
onAction: function(action){
// action is either 'confirm', 'cancel' or 'close'
alert(action + ' was clicked');
}
});
onOpen()
Is triggered after the modal is rendered and opened. If you're loading content via URL using the URL prefix,
you will need the contentLoaded callback after the content is loaded. see URL prefix
onClose()
Is triggered when the modal is closed by any means.
onAction()
Is triggered when either confirm, cancel or close icon is clicked. The onAction function passes an argument holding string of button pressed.