alerts, confirms and dialogs in one.
alerts, confirms and dialogs in one.
Easy to use and highly flexible!
A jQuery plugin that provides great set of features like,
Auto-close, Ajax-loading, Themes, Animations and more.
This plugin is actively developed, I would love you have your suggestions.
These features can practically be used like so.
Elegant Alerts.
Stacked Confirmations
Need input?
Not so important modal
Its also a Dialog.
Loading from remote places
Some actions maybe critical
Keyboard actions?
Automatically centered
Loading images
Clean animations
Download
Download the Latest version and use files in the /dist/
folder.
via Bower:
$ bower install craftpip/jquery-confirm
via Npm:
$ npm install jquery-confirm
Dependencies:
$.alert()
Has only confirm button.
$.alert({
title: 'Alert!',
content: 'Simple alert!',
confirm: function(){
$.alert('Confirmed!'); // shorthand.
}
});
$.confirm()
Has both confirm & cancel buttons.
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
confirm: function(){
$.alert('Confirmed!');
},
cancel: function(){
$.alert('Canceled!')
}
});
<a class="twitter" data-title="Goto twitter?" href="http://twitter.com/craftpip">Goto twitter</a>
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()
Hides both confirm & cancel buttons. (Shows close [x] button)
$.dialog({
title: 'Text content!',
content: 'Simple modal!',
});
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');
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.
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'
})
Hide the Title/Content/Confirm Button/Cancel Button/Close icon when u don't need them.
$.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()
.
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
$.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'
});
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!'
});
jQuery confirm uses ×
html entity for this close symbol, however you can use Any icon of your choice (fa, glyphicon, zmdi)
$.alert({
closeIcon: true
});
Using your own class for icons.
$.alert({
closeIcon: true,
closeIconClass: 'fa fa-close' // or 'glyphicon glyphicon-remove'
});
Impression lies in what we see.
Different animations can be set for open and close events.
2D animations:
3D animations:
$.confirm({
animation: 'zoom',
closeAnimation: 'scale'
});
// Available animations:
// right, left, bottom, top, rotate, none, opacity, scale, zoom,
// scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse)
Some eye candy thats in fashion.
$.confirm({
animationBounce: 1.5, // default is 1.2 whereas 1 is no bounce.
});
Adjust the duration of animation.
$.confirm({
animationSpeed: 2000 // 2 seconds
});
$.confirm({
animationSpeed: 200 // 0.2 seconds
});
The Light & Dark themes that suit any website design,
$.confirm({
theme: 'white'
});
$.confirm({
theme: 'black'
});
$.confirm({
theme: 'supervan' // 'material', 'bootstrap'
});
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:
content: "URL:http://example.com/getData?id=1"
content: function(){ return $.get(...); }
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.
$.confirm({
content: 'url:text.txt',
title: 'Title'
});
The content is set before contentLoaded is called.
$.confirm({
content: 'url:text.txt',
title: 'Title',
contentLoaded: function(data, status, xhr){
var self = this;
setTimeout(function(){
self.setContent('<h1>OK! the status is: ' + status + '</h1><br>' + self.content);
self.setTitle('Stuff is loaded');
}, 2000);
}
});
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.
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 + '<br>Version: ' + response.version); // appending
self.setTitle(response.name);
}).fail(function(){
self.setContent('Something went wrong.');
});
},
confirm: function(){
this.setContent( this.content + '<h4>Adding a new sentence.</h4>');
return false; // prevent modal from closing
}
});
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
$.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');
}
});
Whether the user can close the dialog by clicking outside the modal.
$.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.'
});
Enables keyboard events on jquery-confirm dialog.
ENTER calls confirm();
& ESC calls cancel();
$.confirm({
keyboardEnabled: true,
content: 'Press ESC or ENTER to see it in action.',
cancel: function(){
$.alert('canceled');
},
confirm: function(){
$.alert('confirmed');
}
});
The confirmKeys, cancelKeys take an array of key numbers, in this example 65 is 'A' & 66 is 'B'.
$.confirm({
keyboardEnabled: true,
content: 'Press "A" to confirm or "B" to cancel. <input type="text" placeholder="typing a or b will close the modal"/>',
confirmKeys: [65],
cancelKeys: [66],
cancel: function () {
$.alert('canceled');
},
confirm: function () {
$.alert('confirmed');
}
});
If you need to show the confirm box in rtl then you should set the rtl option to true.
$.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('تایید شد.');
}
});
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.
$.confirm({
content: 'Imagine this is a complex form and you have to attach events all over the form or any element <br>' +
'<button type="button" class="examplebutton">I\'ve events attached!</button>',
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');
}
});
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
Is triggered when the modal is closed by any means.
Is triggered when either confirm, cancel or close icon is clicked. The onAction function passes an argument holding string of button pressed.
You can setup global settings for your jconfirm.
jconfirm.defaults should be set after the plugin has loaded. of course.
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(){
}
};
Options, their defaults, possibilities and explainations.
Name | Type | Default | Description |
---|---|---|---|
title | String | 'Hello' |
Title of the dialog. |
content | String, Function | 'Are you sure to continue?' |
Content for the dialog. Or use a function that returns Ajax promise. |
contentLoaded | function | function(){} |
(optionally available) If you load content via URL prefix using 'url:http://abc.com/xyz', contentLoaded will be the callback. |
icon | String | '' |
Icon class prepended before the title. |
confirmButton | String | 'Okay' |
Button text for the confirm callback. |
cancelButton | String | 'Close' |
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', 'material' & 'bootstrap' |
animation | String | 'zoom' |
The Open animation for the dialog. possible options are right, left, bottom, top, rotate, none, opacity, scale, zoom, scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse) The 'blur' animation was removed in v1.1.2 |
closeAnimation | String | 'scale' |
The close animation for the dialog. Same options as animation. |
animationSpeed | Number | 500 |
Animation duration in miliseconds. |
animationBounce | Float | 1.2 |
Adds a Bounce open animation, 1 = No bounce |
keyboardEnabled | Boolean | false |
Use the ENTER key to trigger the confirm action and ESC key to trigger the cancel action. |
confirmKeys | Array | [13] |
When using `keyboardEnabled`, an array of keys that should trigger confirm. Default 13 // Enter |
cancelKeys | Array | [27] |
When using `keyboardEnabled`, an array of keys that should trigger cancel. Default 27 // Esc key. |
rtl | Boolean | false |
Use the Right to left text layout. |
container | String | 'body' |
Specify where the generated HTML content for jconfirm should append. By default it appends in the document's <body>. |
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 | false |
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 | null |
By default closeIcon is visible if both buttons are false. (dialog mode). closeIcon can be shown by setting this value to true. |
closeIconClass | String | false |
By default jQuery confirm uses × html entity for this close symbol. You can provide icon class here to change it. |
columnClass | String | 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1' |
Provides a better way to set Custom width and is responsive. You can also set custom widths for different display sizes using the Bootstraps grid. |
onOpen | Function | function(){} |
This function is triggered when the jquery-confirm element is rendered. (After the popup is displayed) |
onClose | Function | function(){} |
This function is triggered when the modal is closed. |
onAction | Function | function(){} |
This function is triggered when any of the action performed, ie. confirm/cancel/closeicon click. |
watchInterval | Number | 100 |
Watch the modal for changes and gets centered on the screen. Added in v 2.5.0 |
The function var jc = $.confirm()
returns a reference object on execution.
This jc
can be used to interact with the opened dialog.
var jc = $.confirm({title: 'awesome'}); // jc will be used in the examples below
function
The close method closes/destroys the dialog.
var jc = $.confirm({
...
})
jc.close(); // destroy.
function
Returns boolean value for if the modal is closed or not.
function
Sets the title and overwrites jc.title
function
Sets the content and overwrites jc.content
function
Sets the icon and overwrites jc.icon
function
Centers the dialog on screen. This is done for you by the watch timer when the content changes.
jquery object
Alias: jc.$b, is the modal body that includes buttons content title and stuff.
jquery object
Alias: jc.contentDiv, You can access your Dialogs contents via this object.
var jc = $.confirm({
content: 'Yeah, this is awesome'
})
console.log(jc.$content.html()); // Yeah, this is awesom
jquery object
To access the title DOM of the modal. same use as with $content
jquery object
To access the icon DOM of the modal. same use as with $content
jquery object
To access the confirm button DOM of the modal. same use as with $content
jquery object
To access the cancel button DOM of the modal. same use as with $content
jquery object
To access the close button DOM of the modal. same use as with $content
jquery object
To access the clicked element, only available when using $(element).confirm() and using a confirm callback.
Some helpful stuff for developing with jquery-confirm
You may need the returned reference obj inside the callback function, this
is what you need, literally.
this
within the callback function is the returned object on execution.
var obj = $.confirm({
content: 'some content.',
confirm: function(){
console.log(this.content); // some content
}
})
console.log(obj.content); // some content.
At times you need the content inside dialog be validated, (For example, If you have a form inside, and the fields are required).
You can prevent the modal close by simply doing return false;
var obj = $.confirm({
content: 'Your name: <input type="text" />', // You can also LOAD the html data using Ajax,
confirm: function(){
var val = this.$content.find('input').val(); // get the input value.
if(val.trim() == ''){ // validate it.
return false; // dont close the dialog. (and maybe show some error.)
}
}
});