$.alert({
    title: 'Alert!',
    content: 'Simple alert!',
    confirm: function(){
        alert('Confirmed!');
    }
});

$.confrim({
    title: 'Confirm!',
    content: 'Simple confirm!',
    confirm: function(){
        alert('Confirmed!');
    },
    cancel: function(){
        alert('Canceled!')
    }
});

$.dialog({
    title: 'Text content!',
    content: 'Simple modal!',
});

$.confirm({
    confirmButton: 'Yes i agree',
    cancelButton: 'NO never !'
});

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

The light & dark themes that suit any website design,
HoloLight and HoloDark themes for android web apps.

Light theme Dark theme HoloLight theme HoloDark theme

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

Load from text.txt 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:

right left bottom top Rotate none opacity

3D animations:

scale (default) zoom scaleY scaleX RotateY RotateX

$.confirm({
    animation: 'zoom'
});

see options for list of options you can apply.

Adjust the duration of animation.

I'm too Late I'm too Quick

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

Do a action if the user does not respond of specified time.
The autoClose option takes in a string, like 'confirm|4000' where confirm is the action to trigger after 4000 milliseconds.
Practical examples of autoClose

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

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

By default the 'cancel' action is trigged if the user click outside of the dialog.

With backgroundDismiss Without backgroundDismiss

$.confirm({
    backgroundDismiss: true,
    content: 'Click outside the dialog'
});
$.confirm({
    backgroundDismiss: false,
    content: 'Click outside the dialog'
});

Enables keyboard events on jquery-confirm dialog.
ENTER calls confirm(); & ESC calls cancel();

Keyboard Enabled

$.confirm({
    keyboardEnabled: true,
    content: 'Press ESC or ENTER to see it in action.',
    cancel: function(){
        alert('canceled');
    },
    confirm: function(){
        alert('confirmed');
    }
});

You can setup global settings for your jconfirm.

jconfirm.defaults should be set after the plugin has loaded.

jconfirm.defaults = {
    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 () {
        // code here
    },
    cancel: function () {
        // code here
    },
    backgroundDismiss: true,
    autoClose: false,
    closeIcon: true,
    keyboardEnabled: true
};

Options, their defaults and possibilities.

obj.close()

The close method closes/destroys the dialog.

var obj = $.confirm({
    title: 'awesome',
    content: 'Yeah, this is awesome'
})
// Reference object is stored in 'obj', and the dialog opens on execution!

obj.close();
// The dialog is closed/destroyed.

obj.$b

The $b object is a jQuery DOM reference to the dialog. You can access your Dialogs contents via this object.

var obj = $.confirm({
    title: 'awesome',
    content: '<span class="styled">Yeah, this is awesome</span>'
})

var finding = obj.$b.find('.styled').html();
console.log(finding);
// Yeah, this is awesome

Getting the reference object inside callback functions

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

var obj = $.confirm({
    title: 'awesome',
    content: 'Get me yeah.',
    confirm: function(){
        console.log(this.content);
        // Get me yeah.
    }
})

console.log(obj.content);
// Get me yeah.

// Moral, this within the callback function is the returned object on execution.

Preventing the dialog from closing

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({
    title: 'awesome',
    content: 'Your name: <input type="text" />', // You can also LOAD the html data using LOAD FROM URL feature,
    confirm: function(){

        var val = this.$b.find('input').val();
        // there is a input element inside the content.

        if(val == ''){
        // if the value is empty, dont close the dialog. (and maybe show some error.)

            return false;
        }

    }

    // NOTE: You can return any falsy value to prevent close (such as '', null, undefined, 0).
});