Change the button text for confirm and cancel.

click me!

$.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

info and danger! warning and success!

$.confirm({
    confirmButtonClass: 'btn-info',
    cancelButtonClass: 'btn-danger'
})

Hide the Title/Content/Confirm Button/Cancel Button/Close icon when u don't need them.

No title No content No title/cancel Button No title/cancel/confirm Button No title/cancel/confirm Button + no close icon

$.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

col-md-6 col-md-offset-3 col-md-4 col-md-offset-4 (default) col-md-4 col-md-4 col-md-offset-8 col-md-12

$.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.

Using bootstrap's glyphicon Using font-awesome Animated font-awesome

$.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)

With closeIcon

$.alert({
    closeIcon: true
});

Using your own class for icons.

Using glyphicon Using font awesome

$.alert({
    closeIcon: true,
    closeIconClass: 'fa fa-close' // or 'glyphicon glyphicon-remove'
});

2D animations:

right left bottom top Rotate none opacity

3D animations:

scale (default) zoom scaleY scaleX RotateY RotateYR RotateX RotateXR

$.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.

No bounce 1.5 bounce 2 bounce 2.5 bounce

$.confirm({
        animationBounce: 1.5, // default is 1.2 whereas 1 is no bounce.
    });
                            

Adjust the duration of animation.

I'm too Late I'm too Quick

$.confirm({
    animationSpeed: 2000 // 2 seconds
});
$.confirm({
    animationSpeed: 200 // 0.2 seconds
});

Light theme Dark theme Supervan Material Bootstrap

$.confirm({
    theme: 'white'
});
$.confirm({
    theme: 'black'
});
$.confirm({
    theme: 'supervan' // 'material', 'bootstrap'
});

Auto Cancel. Auto Confirm.

$.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.

Allow backgroundDismiss Disallow backgroundDismiss

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

Keyboard Enabled

$.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'.

With custom 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');
    }
});

If you need to show the confirm box in rtl then you should set the rtl option to true.

Try RTL

$.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.

With Callbacks

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

The close method closes/destroys the dialog.

var jc = $.confirm({
    ...
})
jc.close(); // destroy.

Returns boolean value for if the modal is closed or not.

Sets the title and overwrites jc.title

Sets the content and overwrites jc.content

Sets the icon and overwrites jc.icon

Centers the dialog on screen. This is done for you by the watch timer when the content changes.

Alias: jc.$b, is the modal body that includes buttons content title and stuff.

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

To access the title DOM of the modal. same use as with $content

To access the icon DOM of the modal. same use as with $content

To access the confirm button DOM of the modal. same use as with $content

To access the cancel button DOM of the modal. same use as with $content

To access the close button DOM of the modal. same use as with $content

To access the clicked element, only available when using $(element).confirm() and using a confirm callback.

You may need the returned reference obj inside the callback function, this is what you need, literally.

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