alerts, confirmsand dialogsin 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?
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') }});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-primarybtn-inversebtn-warningbtn-infobtn-dangerbtn-success
$.confirm({ confirmButtonClass: 'btn-info', cancelButtonClass: 'btn-danger'}) The light& darkthemes that suit any website design,
HoloLightand HoloDarkthemes 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 optionsfor 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 autoCloseoption 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 $.alertor $.confirmfunction, 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);