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
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>
$('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.
});
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.