JQUERY-CONFIRM

alerts, confirms and dialogs in one.


Welcome to jquery-confirm!

A jQuery plugin that provides great set of features like, Auto-close, Ajax-loading, background-dismiss, themes and more.
This plugin is actively developed, We would love you have your suggestions.

Issues/Features here.

Practical Uses

These features can practically be used like so.

Elegant Alerts.

Stacked Confirmations

Important modal

Need input?

Its also a Dialog.

Something huge?

User friendly?

Keyboard actions?

Quick Usage

Dependencies:

  • Bootstrap by Twitter >= v2
  • jQuery library > v1.8

Show an alert dialog
$.alert() Has only confirm button.

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

Show an confirm dialog
$.confirm() Has both confirm & cancel buttons.

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

Show an modal dialog
$.dialog() Hides both confirm & cancel buttons. (Shows close [x] button)

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

Examples

NOTE: The $.confirm(), $.dialog() & $.alert() methods are alias of jconfirm().
All three methods indirectly call the jconfirm base function altering the provided options.

BUTTON TEXT

Change the button text for confirm and cancel.

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

BUTTON STYLE

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

THEME

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

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

LOAD VIA URL

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.

view text.txt
$.confirm({
    content: 'url:text.txt',
    title: 'Title'
}); 

ANIMATION!

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

2D animations:

3D animations:

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

see options for list of options you can apply.

ANIMATION SPEED

Adjust the duration of animation.

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

AUTO-CLOSE

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

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

ICONS

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

BACKGROUND DISMISS

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

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

KEYBOARD ACTIONS

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

GLOBAL DEFAULTS

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

Options, their defaults and possibilities.

Name type default description
title String 'Hello' Title of the dialog.
content String 'Are you sure to continue?' Content for the dialog.
icon String '' Icon class prepended before the title.
confrimButton String 'Okay' Button text for the confirm callback.
cancelButton String 'Cancel' Button text for the cancel callback.
confirmButtonClass String 'btn-default' Class for the confirm button.
cancelButtonClass String 'btn-default' Class for the cancel button.
theme String 'white' Color theme for the dialog.
possible options are 'white' & 'black'
animation String 'scale' Open & Close animation for the dialog.
possible options are 'scale', 'top', 'bottom', 'left', 'right', 'zoom', 'opacity', 'none', 'rotate', 'rotatex', 'rotatey', 'scalex', 'scaley'.
The 'blur' animation was removed at v1.1.2
animationSpeed Number 400 Animation duration in miliseconds.
confirm Function function(){} function to run after the user clicks the confirm button.
cancel Function function(){} function to run after the user clicks the cancel button.
backgroundDismiss Boolean true if the user can dismiss the dialog via clicking outside the dialog.
autoClose String false Auto-close the dialog within a specified time, if the user doesn't respond.
possible option 'confirm|400'

the string is divided in two halves with '|', the first part specifies the button to trigger, 'confirm' or 'cancel'. The other half specifies the wait time in miliseconds.

closeIcon Boolean true Close icon comes into picture if both the buttons are disabled, (dialog mode).
You may remove the close icon by settings this value to false.
keyboardEnabled Boolean false Use the ENTER key to trigger the confirm action and ESC key to trigger the cancel action.
container String 'body' Specify where the generated HTML content for jconfirm should append.
By default it appends in the document's <body>.

RETURNED OBJECT

The function var obj = $.confirm() returns a reference object on execution.
This obj can be used to interact with the opened dialog.

var obj = $.confirm({title: 'awesome'}); // initial execution

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

INSIDE CALLBACKS

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

Thanks for making it to the END of the document.
This Documentation needs review.

Please post your
Questions / Suggestions / Issues.

Made with Love.