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
$.dialog() Hides both confirm & cancel buttons. (Shows close [x] button)
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');
Apply the classes you want in the buttons.
Available bootstrap options are btn-primarybtn-inversebtn-warningbtn-infobtn-dangerbtn-success
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().
Custom width
Jquery-confirm uses bootstrap's grid system for its layout.
You can simply provide column classes to adjust the modal's width.
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!'
Close icon
jQuery confirm uses × html entity for this close symbol, however you can use Any icon of your choice (fa, glyphicon, zmdi)
Using $.dialog will show the close Icon by default.
$.alert({
closeIcon: true
Using your own class for icons.
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:
Pass in String content the URL with "URL:" prepended.
Eg: content: "URL:http://example.com/getData?id=1"
Pass in Function that returns a jQuery ajax promise.
Eg: content: function(){ return $.get(...); }
The confirm / cancel buttons are disabled until the Ajax call is complete.
Using the "URL:" prefix
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.
view text.txt
$.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');
The 'cancel' action is trigged if the user click outside of the dialog.
$.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.'
keyboardEnabled: true,
content: 'Press ESC or ENTER to see it in action.',
cancel: function(){
$.alert('canceled');
confirm: function(){
$.alert('confirmed');
Setting custom keys
The confirmKeys, cancelKeys take an array of key numbers, in this example 65 is 'A' & 66 is 'B'.
If the modal has input elements, ENTER & SPACE buttons will not do anything for the focused input (when the user is typing)
Using custom keys like 'A' or 'B' when you have input elements inside the modal will cause the modal to close when user types those keys.
$.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');
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');
onOpen()
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
onClose()
Is triggered when the modal is closed by any means.
onAction()
Is triggered when either confirm, cancel or close icon is clicked. The onAction function passes an argument holding string of button pressed.
