jquery-confirm
view on Github
version 1.0.0
A modern look to how a alert, confirm feels.
Dependencies:
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')
}
});
These features can practically be used like so.
Ask confirmation!
Double Confirmation!
Get Attention!
Looping! (just for fun.)
NOTE:
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-warning
btn-info
btn-danger
btn-success
$.confirm({
confirmButtonClass: 'btn-info',
cancelButtonClass: 'btn-danger'
})
Thats your taste
$.confirm({
theme: 'white'
});
$.confirm({
theme: 'black'
});
$.confirm({
theme: 'hololight'
});
$.confirm({
theme: 'holodark'
});
All the impression lies in what we see.
Lots and lots of animations
$.confirm({
animation: 'blur'
});
see options for list of options you can apply.
Adjust what speed you need for the animation.
$.confirm({
animationSpeed: 2000 // 2 seconds
});
$.confirm({
animationSpeed: 200 // 0.2 seconds
});
At times you need the user to respond to the alert,
if not, a default action is triggered.
The autoClose
option takes in a string, example 'confirm|4000'
where confirm is the action to trigger and 4000 is the time to wait in miliseconds.
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('confrimed');
},
cancel:function(){
alert('cancelled');
}
});
$.confirm({
title: 'Logout?',
content: 'Your time is out, you will be automatically logged out in 10 seconds.',
autoClose: 'confirm|10000',
confirm: function(){
alert('confrimed');
},
cancel:function(){
alert('cancelled');
}
});
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
};
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 |
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);