$.alert({
    title: 'Alert!',
    content: 'Alert! alert! alert!',
    confirm: function(){
        alert('the user clicked yes');
    }
});

$.confrim({
    title: 'Confirm!',
    content: 'Confirm! Confirm! Confirm!',
    confirm: function(){
        alert('the user clicked confirm');
    },
    cancel: function(){
        alert('the user clicked cancel')
    }
});

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

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

Thats your taste

Light theme Dark theme HoloLight theme HoloDark theme

$.confirm({
    theme: 'white'
});
$.confirm({
    theme: 'black'
});
$.confirm({
    theme: 'hololight'
});
$.confirm({
    theme: 'holodark'
});

All the impression lies in what we see.
Lots and lots of animations

blur (experimental) scaleY scaleX RotateY RotateX Rotate none opacity zoom scale (default) right left bottom top

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

see options for list of options you can apply.

Adjust what speed you need for the animation.

I'm too Late I'm too Quick

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

At times you need the user to respond to the alert, if not, a default action is triggered.
The autoClose option takes in a string, example 'confirm|4000' where confirm is the action to trigger and 4000 is the time to wait in miliseconds.
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('confrimed');
    },
    cancel:function(){
        alert('cancelled');
    }
});

$.confirm({
    title: 'Logout?',
    content: 'Your time is out, you will be automatically logged out in 10 seconds.',
    autoClose: 'confirm|10000',
    confirm: function(){
        alert('confrimed');
    },
    cancel:function(){
        alert('cancelled');
    }
});

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

You can specify default actions like so.

jconfirm.pluginDefaults = {
    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 () {
    },
    cancel: function () {
    },
    backgroundDismiss: true,
    autoClose: false
};

Options, their defaults and possibilities.

close()

On calling the $.alert or $.confirm function, it returns a reference object. You can use this object to access the dialog.

Example Close() method.

var obj = $.alert({
    title: 'Closing this in 2 seconds.',
    content: 'Closing me via SetTimeout for demonstration.'
})
setTimeout(function(){
    // some point in future.
    obj.close();
},2000);