alerts, confirms and dialogs in one.
A jQuery plugin that provides great set of features like,
Auto-close, Ajax-loading, background-dismiss, themes and more.
This plugin is actively developed.
These features can practically be used like so.
Elegant Alerts.
Stacked Confirmations
Important modal
Its also a Dialog.
Something huge?
User friendly?
依赖项:
show an alert dialog
$.alert({
title: 'Alert!',
content: 'Alert! alert! alert!',
confirm: function(){
alert('the user clicked yes');
}
});
show an confirm dialog
$.confrim({
title: 'Confirm!',
content: 'Confirm! Confirm! Confirm!',
confirm: function(){
alert('the user clicked confirm');
},
cancel: function(){
alert('the user clicked cancel')
}
});
注意:
The $.confirm() & $.alert() methods are alias of jconfirm().
The options shown below can be used with $.alert() in the same way.
Change the button text for confirm and cancel.
$.confirm({
confirmButton: 'Yes i agree',
cancelButton: 'NO never !'
});
Apply the classes you want in the buttons.
Available bootstrap options are btn-primary btn-inverse btn-warning btn-info btn-danger btn-success
$.confirm({
confirmButtonClass: 'btn-info',
cancelButtonClass: 'btn-danger'
})
The light & dark themes that suit any website design,
HoloLight and HoloDark themes for android web apps.
$.confirm({
theme: 'white'
});
$.confirm({
theme: 'black'
});
$.confirm({
theme: 'hololight'
});
$.confirm({
theme: 'holodark'
});
Get content from a file/url.
Prepend URL: to your URL. The URL will be called with the get ajax method.
Example content: "URL:http://example.com/getData?id=1"
The confirm/cancel buttons are disabled until the content is fetched from the URL.
You can also load HTML contents to the modal with ease.
view text.txt$.confirm({
content: 'url:text.txt',
title: 'Title'
});
All the impression lies in what we see.
Lots and lots of animations
2D animations:
3D animations:
$.confirm({
animation: 'blur'
});see options for list of options you can apply.
Adjust the duration of animation.
$.confirm({
animationSpeed: 2000 // 2 seconds
});
$.confirm({
animationSpeed: 200 // 0.2 seconds
});
Do a action if the user does not respond of specified time.
The autoClose option takes in a string, like 'confirm|4000' where confirm is the action to trigger after 4000 milliseconds.
Practical examples of autoClose
$.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');
}
});
Give meaning to your dialog with custom icons.
Read about Font Awesome here.
$.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. <br>The animated icon is provided by Font-Awesome!'
});
By default the 'cancel' action is trigged if the user click outside of the dialog.
$.confirm({
backgroundDismiss: true,
content: 'Click outside the dialog'
});
$.confirm({
backgroundDismiss: false,
content: 'Click outside the dialog'
});
You can specify default actions like so.
jconfirm.pluginDefaults = {
title: 'Hello',
content: 'Are you sure to continue?',
icon: '',
confirmButton: 'Okay',
cancelButton: 'Cancel',
confirmButtonClass: 'btn-default',
cancelButtonClass: 'btn-default',
theme: 'white',
animation: 'scale',
animationSpeed: 400,
confirm: function () {
},
cancel: function () {
},
backgroundDismiss: true,
autoClose: false,
closeIcon: true
};
Options, their defaults and possibilities.
| Name | type | default | description |
|---|---|---|---|
| title | String | 'Hello' |
Title of the dialog. |
| content | String | 'Are you sure to continue?' |
Content for the dialog. |
| icon | String | '' |
Icon class prepended before the title. |
| confrimButton | String | 'Okay' |
Button text for the confirm callback. |
| cancelButton | String | 'Cancel' |
Button text for the cancel callback. |
| confirmButtonClass | String | 'btn-default' |
Class for the confirm button. |
| cancelButtonClass | String | 'btn-default' |
Class for the cancel button. |
| theme | String | 'white' |
Color theme for the dialog. possible options are 'white' & 'black' |
| animation | String | 'scale' |
Open & Close animation for the dialog. possible options are 'scale', 'top', 'bottom', 'left', 'right', 'zoom', 'opacity', 'none', 'rotate', 'rotatex', 'rotatey', 'scalex', 'scaley', 'blur'. |
| animationSpeed | Number | 400 |
Animation duration in miliseconds. |
| confirm | Function | function(){} |
function to run after the user clicks the confirm button. |
| cancel | Function | function(){} |
function to run after the user clicks the cancel button. |
| backgroundDismiss | Boolean | true |
if the user can dismiss the dialog via clicking outside the dialog. |
| autoClose | String | false |
Auto-close the dialog within a specified time, if the user doesn't respond. possible option 'confirm|400'
the string is divided in two halves with |
| closeIcon | Boolean | true |
Close icon comes into picture if both the buttons are disabled, (dialog mode). You may remove the close icon by settings this value to false. |
On calling the $.alert or $.confirm function, it returns a reference object. You can use this object to access the dialog.
var obj = $.alert({
title: 'Closing this in 2 seconds.',
content: 'Closing me via SetTimeout for demonstration.'
})
setTimeout(function(){
// some point in future.
obj.close();
},2000);