#

alerts, confirms and dialogs in one.

Download v3.3.0 View on GitHub

jquery-confirm v - docs
view on Github

### Welcome to jquery-confirm!

Easy to use and highly flexible!
A jQuery plugin that provides great set of features like, Auto-close, Ajax-loading, Themes, Animations and more.
This plugin is actively developed, I would love you have your suggestions.

Please post your Suggestions here.

angular-confirm is here
Use angular scope within your confirm modal, with all the features of jquery-confirm

## Features

These features can practically be used like so.

Elegant Alerts.

Stacked Confirmations

Success, error, warning

Need input?

Its also a Dialog.

Not so important modal

Loading from remote places

Some actions maybe critical

Responds to keystrokes

Automatically centered

Loading images

Clean animations

Drag me around

## Themes

jquery-confirm comes loaded with themes for all common use cases.

## Whats new in v3.3.0

Major changes

- Moved overflow scroll inside modal #286

Improvements

- 'draggable' improved
- Added 'animateFromElement' option
- Added 'smoothScroll' option
- Added 'hilight' option
- Added 'showLoading','hideLoading' option
- Accept jquery dom element in content #313
- Updated docs
- Fixes #255 #307 #290

Removals

- 'setDialogCenter' method deprecated, dialog centered with CSS tables
- 'alignMiddle' method deprecated

## Getting started

Notes on migrating from v2 to v3.
https://github.com/craftpip/jquery-confirm/wiki/Migrate-from-v2-to-v3

### Installation

Download
Download the Latest version and use files in the `/dist/` folder.

via CDN:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>

via Bower:
Simply copy these links

    $ bower install craftpip/jquery-confirm

via Npm:

    $ npm install jquery-confirm

Dependencies:

- Bootstrap by Twitter >= v3 (optional, if you want to use responsive layouts)
- jQuery library > v1.8

to use jconfirm without bootstrap set `useBootstrap: false`

### Quick Usage

#### `$.alert`

adds one button (okay) if no buttons are specified, this lets the user to close the modal.

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

#### `$.confirm`

if no buttons are specified, two buttons (Okay & cancel) will be added.

    $.confirm({
        title: 'Confirm!',
        content: 'Simple confirm!',
        buttons: {
            confirm: function () {
                $.alert('Confirmed!');
            },
            cancel: function () {
                $.alert('Canceled!');
            },
            somethingElse: {
                text: 'Something else',
                btnClass: 'btn-blue',
                keys: ['enter', 'shift'],
                action: function(){
                    $.alert('Something else?');
                }
            }
        }
    });

##### Showing prompt using confirm

Simply add form to the content and bind the events you want.
This form can also be loaded via ajax.

    $.confirm({
        title: 'Prompt!',
        content: '' +
        '<form action="" class="formName">' +
        '<div class="form-group">' +
        '<label>Enter something here</label>' +
        '<input type="text" placeholder="Your name" class="name form-control" required />' +
        '</div>' +
        '</form>',
        buttons: {
            formSubmit: {
                text: 'Submit',
                btnClass: 'btn-blue',
                action: function () {
                    var name = this.$content.find('.name').val();
                    if(!name){
                        $.alert('provide a valid name');
                        return false;
                    }
                    $.alert('Your name is ' + name);
                }
            },
            cancel: function () {
                //close
            },
        },
        onContentReady: function () {
            // bind to events
            var jc = this;
            this.$content.find('form').on('submit', function (e) {
                // if the user submits the form by pressing enter in the field.
                e.preventDefault();
                jc.$$formSubmit.trigger('click'); // reference the button and click it
            });
        }
    });

#### `$.dialog`

removes buttons and explicitly shows the closeIcon (×)

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

#### `$.fn.confirm`

This can be used to bind to a element directly
If no buttons are defined, the default buttons (okay and cancel) will be added, and default action for okay will be to redirect on the given href. use this.$target to get the clicked element.

Goto twitter

HTML

    <a class="twitter" data-title="Goto twitter?" href="http://twitter.com/craftpip">Goto twitter</a>

Javascript

    $('a.twitter').confirm({
        content: "...",
    });
    $('a.twitter').confirm({
        buttons: {
            hey: function(){
                location.href = this.$target.attr('href');
            }
        }
    });

#### Shorthand usage

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'); try me
    $.confirm('A message', 'Title is optional'); try me
    $.dialog('Just to let you know'); try me

#### Lazy open

If you want to create a instance of jconfirm and save it for later use.

    var a = $.confirm({
        lazyOpen: true,
    });
    a.open();
    a.close();
    a.toggle(); // toggle open close.

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

ADVANCED: `this.$body` is the body div for jquery-confirm. You can find and alter any element at run time.

## Buttons

Its all what you need to know about buttons in jquery-confirm v3.
Defining multiple buttons is introduced in v3.

You can access the button element via `this.$$heyThere` for heyThere button in the below snippet.
this is to change the button properties at run time.

#### Definition

Buttons can be defined in the following fashion, pretty self explanatory.

    $.confirm({
        buttons: {
            hello: function(helloButton){
                // shorthand method to define a button
                // the button key will be used as button name
            },
            hey: function(heyButton){
                // access the button using jquery
                this.$$hello.trigger('click'); // click the 'hello' button
                this.$$hey.prop('disabled', true); // disable the current button using jquery method

                // jconfirm button methods, all methods listed here
                this.buttons.hello.setText('Helloooo'); // setText for 'hello' button
                this.buttons.hey.disable(); // disable with button function provided by jconfirm
                this.buttons.hey.enable(); // enable with button function provided by jconfirm

                // the button's instance is passed as the first argument, for quick access
                heyButton === this.buttons.hey
            },
            heyThere: {
                text: 'Hey there!', // text for button
                btnClass: 'btn-blue', // class for the button
                keys: ['enter', 'a'], // keyboard event for button
                isHidden: false, // initially not hidden
                isDisabled: false, // initially not disabled
                action: function(heyThereButton){
                    // longhand method to define a button
                    // provides more features
                }
            },
        }
    });

#### Button text

    $.confirm({
        buttons: {
            hey: function () {
                // here the button key 'hey' will be used as the text.
                $.alert('You clicked on "hey".');
            },
            heyThere: {
                text: 'hey there!', // With spaces and symbols
                action: function () {
                    $.alert('You clicked on "heyThere"');
                }
            }
        }
    });

#### Button style

Simply apply classes to buttons to style them.

Jconfirm comes bundled with `btn-blue` `btn-green` `btn-red` `btn-orange` `btn-purple` `btn-default` `btn-dark`
These classes only work inside jquery-confirm's modal

Other bootstrap options are `btn-primary` `btn-inverse` `btn-warning` `btn-info` `btn-danger` `btn-success`.

    $.confirm({
        buttons: {
            info: {
                btnClass: 'btn-blue',
                action: function(){}
            },
            danger: {
                btnClass: 'btn-red any-other-class', // multiple classes.
                ...
            },
            warning: {
                btnClass: 'btn-warning',
                ...
            },
        }
    });

#### Button keys

A 'key' feature of jquery-confirm! (pun intended)
Listen to keyup events for individual buttons. A button can listen for multiple keys at a time.
If multiple modals are stacked together, only the topmost modal will listen for keyboard event.

Available key options are:
a to Z, tilde (the ` key), enter, shift, tab, capslock, ctrl, win, alt, esc, space.

    $.confirm({
        content: 'Time to use your keyboard, press shift, alert, A or B',
        buttons: {
            specialKey: {
                text: 'On behalf of shift',
                keys: ['shift', 'alt'],
                action: function(){
                    $.alert('Shift or Alt was pressed');
                }
            },
            alphabet: {
                text: 'A, B',
                keys: ['a', 'b'],
                action: function(){
                    $.alert('A or B was pressed');
                }
            }
        }
    });

In this example, the YES button is hidden, The user can only use the keyboard to click the button!

    $.confirm({
        title: false,
        content: 'Imagine a very critical action here! <br> ' +
                 'Please press <strong style="font-size: 20px;">Y</strong> to proceed.',
        buttons: {
            yes: {
                isHidden: true, // hide the button
                keys: ['y'],
                action: function () {
                    $.alert('Critical action <strong>was performed</strong>.');
                }
            },
            no: {
                keys: ['N'],
                action: function () {
                    $.alert('You clicked No.');
                }
            },
        }
    });

#### Button functions

jquery-confirm provides a set of functions for a nice and clean way to alter your buttons in run-time.
if this is not enough you can use `this.$$<buttonName>` to get the jquery DOM element

A full list of functions for buttons.

Function | Code | Description
--- | --- | ---
setText | this.buttons.<buttonName>.setText(text) | The text you want to set.
addClass | this.buttons.<buttonName>.addClass(className) | Add a class to the button
removeClass | this.buttons.<buttonName>.removeClass(className) | remove a class to the button
disable | this.buttons.<buttonName>.disable() | Disable the button
enable | this.buttons.<buttonName>.enable() | Enable the button
show | this.buttons.<buttonName>.show() | Show the button via CSS
hide | this.buttons.<buttonName>.hide() | Hide the button via CSS

    $.confirm({
        closeIcon: true, // explicitly show the close icon
        buttons: {
            buttonA: {
                text: 'button a',
                action: function (buttonA) {
                    this.buttons.resetButton.setText('reset button!!!');
                    this.buttons.resetButton.disable();
                    this.buttons.resetButton.enable();
                    this.buttons.resetButton.hide();
                    this.buttons.resetButton.show();
                    this.buttons.resetButton.addClass('btn-red');
                    this.buttons.resetButton.removeClass('btn-red');

                    // or
                    this.$$resetButton // button's jquery element reference, go crazy

                    this.buttons.buttonA == buttonA // both are the same.

                    return false; // prevent the modal from closing
                }
            },
            resetButton: function (resetButton) {

            }
        }
    });

## Customizing

#### Dialog type

Dialog types helps give the user a hint as to what the dialog is about

    $.confirm({
        title: 'Encountered an error!',
        content: 'Something went downhill, this may be serious',
        type: 'red',
        typeAnimated: true,
        buttons: {
            tryAgain: {
                text: 'Try again',
                btnClass: 'btn-red',
                action: function(){
                }
            },
            close: function () {
            }
        }
    });

#### 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'
    });
    $.confirm({
        icon: 'fa fa-spinner fa-spin',
        title: 'Working!',
        content: 'Sit back, we are processing your request!'
    });

#### Close icon

jQuery confirm uses `&times;` html entity for this close symbol, however you can use Any icon of your choice (fa, glyphicon, zmdi)

By default `closeIcon` is set to `null`. That means, if buttons are not defined the closeIcon will be shown, else will not be shown.
To explicitly show `closeIcon` set it to a truthy value and vise versa.

Turn on closeIcon explicitly

    $.confirm({
        closeIcon: true
    });

Using other libraries for icons

    $.confirm({
        closeIcon: true,
        closeIconClass: 'fa fa-close'
    });

#### Handle closeIcon's callback

Control what happens when close icon is clicked.
closeIcon can take in function to handle the button click or you can return a button name.

    $.confirm({
        closeIcon: function(){
            return false; // to prevent close the modal.
            // or
            return 'aRandomButton'; // set a button handler, 'aRandomButton' prevents close.
        },
        // or
        closeIcon: 'aRandomButton', // set a button handler
        buttons: {
            aRandomButton: function(){
                $.alert('A random button is called, and i prevent closing the modal');
                return false; // you shall not pass
            },
            close: function(){
            }
        }
    });

#### Custom width

Jquery-confirm uses bootstrap's grid system for its layout by default. You can simply provide column classes to adjust the modal's width.

You can also set responsive layouts. Bootstrap grid docs

instead of typing the whole thing, provide keywords like
`xlarge`/`xl` equivalent to `col-md-12`
`large`/`l` equivalent to `col-md-8 col-md-offset-2`
`medium`/`m` equivalent to `col-md-6 col-md-offset-3`
`small`/`s` equivalent to `col-md-4 col-md-offset-4`
`xsmall`/`xs` equivalent to `col-md-2 col-md-offset-5`

    $.confirm({
        columnClass: 'small'
    });
    $.confirm({
        columnClass: 'col-md-4 col-md-offset-4',
    });
    $.confirm({
        columnClass: 'col-md-12'
    });
    $.confirm({
        columnClass: 'col-md-4 col-md-offset-8 col-xs-4 col-xs-offset-8',
        containerFluid: true, // this will add 'container-fluid' instead of 'container'
    });

#### Custom width without Bootstrap

Many have a different taste, who wont be using bootstrap in their projects.
You can simply provide the width of the modal, in px or any metric you want.

`useBootstrap` must be set to `false` to use this feature
you can globally disable bootstrap by setting `jconfirm.defaults.useBootstrap = false`

    $.confirm({
        boxWidth: '30%',
        useBootstrap: false,
    });
    $.confirm({
        boxWidth: '500px',
        useBootstrap: false,
    });

#### Namespaced bootstrap

Namespacing is basically isolating the bootstrap classes names, like turning '.row' to '.custom-row'
If you're using a namespaced bootstrap library, this option is for you.

it is ideal to set this in jconfirm.defaults

    $.confirm({
        bootstrapClasses: {
            container: 'container',
            containerFluid: 'container-fluid',
            row: 'row',
        },
    });

## Draggable

Make the dialog draggable. simple.
Draggable is set to TRUE by default.

    $.confirm({
        title: 'Hello there',
        content: 'click and hold on the title to drag',
        draggable: true,
    });

#### Window border

By default jconfirm's modal is prevented from being dragged out of the window.

    $.confirm({
        title: 'Hello there',
        content: 'Drag this modal out of the window',
        draggable: true,
        dragWindowBorder: false,
    });

#### Window gap

If `dragWindowBorder` is set to `true` a defined space is maintained between the modal and the window.
this distance can be changed with this feature.

    $.confirm({
        title: 'Hello there',
        content: 'try to drag this modal out of the window',
        draggable: true,
        dragWindowGap: 0, // number of px of distance
    });

## Animations

The animations section is moved to the animations.html page.
This page has docs for animations for modal open/close and backgroundDismiss
It also describes how to create custom animations.

see Animations

## Themes

The themes section is moved to the themes.html page
This page has docs for themes & how to create custom themes

see Themes

## Ajax loading

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:

1. Pass in String content the URL with "URL:" prepended.
   `content: "URL:http://example.com/getData?id=1"`
2. Pass in Function that returns a jQuery ajax promise.
   `content: function(){ return $.get(...); }`

From v3 onwards, buttons are not disabled until ajax call is complete.
contentLoaded is called when the ajax is complete. before the content is put in DOM.

#### 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".

NOTE: the returned data is set as content automatically before contentLoaded callback is called.

view text.txt

    $.confirm({
        title: 'Title',
        content: 'url:text.txt',
        onContentReady: function () {
            var self = this;
            this.setContentPrepend('<div>Prepended text</div>');
            setTimeout(function () {
                self.setContentAppend('<div>Appended text after 2 seconds</div>');
            }, 2000);
        },
        columnClass: 'medium',
    });

#### Using Ajax promise

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.

NOTE: the returned data is NOT set as content automatically, you must set the content yourself.

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.setContentAppend('<br>Version: ' + response.version);
                self.setTitle(response.name);
            }).fail(function(){
                self.setContent('Something went wrong.');
            });
        }
    });

#### Ajax complete callback `contentLoaded`

When the ajax call is complete the `contentLoaded` function is called with arguments Data, Status & Xhr object.
`contentLoaded` is called before the content is put in DOM
If you want to do stuff after the content has put in DOM, use `onContentReady`

    $.confirm({
        content: 'url:text.txt',
        contentLoaded: function(data, status, xhr){
            // data is already set in content
            this.setContentAppend('<br>Status: ' + status);
        }
    });

Using the url: prefix method

    $.confirm({
        content: function(){
            var self = this;
            self.setContent('Checking callback flow');
            return $.ajax({
                url: 'bower.json',
                dataType: 'json',
                method: 'get'
            }).done(function (response) {
                self.setContentAppend('<div>Done!</div>');
            }).fail(function(){
                self.setContentAppend('<div>Fail!</div>');
            }).always(function(){
                self.setContentAppend('<div>Always!</div>');
            });
        },
        contentLoaded: function(data, status, xhr){
            self.setContentAppend('<div>Content loaded!</div>');
        },
        onContentReady: function(){
            this.setContentAppend('<div>Content ready!</div>');
        }
    });

Using the Ajax promise method

You can set your content in any of the callbacks. callback execution flow:

1. Promise's done
2. Promise's always
3. contentLoaded
4. onContentReady

## Auto close

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: 'cancelAction|8000',
        buttons: {
            deleteUser: {
                text: 'delete user',
                action: function () {
                    $.alert('Deleted the user!');
                }
            },
            cancelAction: function () {
                $.alert('action is canceled');
            }
        }
    });
    $.confirm({
       title: 'Logout?',
        content: 'Your time is out, you will be automatically logged out in 10 seconds.',
        autoClose: 'logoutUser|10000',
        buttons: {
            logoutUser: {
                text: 'logout myself',
                action: function () {
                    $.alert('The user was logged out');
                }
            },
            cancel: function () {
                $.alert('canceled');
            }
        }
    });

## Background dismiss

Control what happens if the user clicks outside the modal.

backgroundDismiss is set to false by default.

    $.confirm({
        backgroundDismiss: true, // this will just close the modal
    });
    $.confirm({
        backgroundDismiss: function(){
            return false; // modal wont close.
        },
    });
    $.confirm({
        backgroundDismiss: function(){
            return 'buttonName'; // the button will handle it
        },
    });
    $.confirm({
        backgroundDismiss: 'buttonName',
        content: 'in here the backgroundDismiss action is handled by buttonName' +
        '<div class="checkbox"><label><input type="checkbox" id="enableCheckbox"> Enable backgroundDismiss</label></div>',
        buttons: {
            buttonName: function () {
                var $checkbox = this.$content.find('#enableCheckbox');
                return $checkbox.prop('checked');
            },
            close: function () {
            }
        }
    });

#### Background dismiss animation

Fancy animations to grab users attention. Click outside the modal to see the animation.

    $.confirm({
        backgroundDismiss: false,
        backgroundDismissAnimation: 'shake',
    });
    $.confirm({
        backgroundDismiss: false,
        backgroundDismissAnimation: 'glow',
    });

## Escape key

Control what happens when the escape key is pressed. This is enabled by default.
backgroundDismiss is called when escape key is pressed. if backgroundDismiss is false, it will shake the modal.

    $.confirm({
        escapeKey: true,
        backgroundDismiss: false,
    });
    $.confirm({
        escapeKey: 'buttonName',
        buttons: {
            buttonName: function(){
                $.alert('Button name was called');
            },
            close: function(){

            }
        }
    });

## RTL support

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

    $.alert({
        title: 'پیغام',
        content: 'این یک متن به زبان شیرین فارسی است',
        rtl: true,
        closeIcon: true,
        buttons: {
            confirm: {
                text: 'تایید',
                btnClass: 'btn-blue',
                action: function () {
                    $.alert('تایید شد.');
                }
            },
            cancel: {
                text: 'انصراف',
                action: function () {

                }
            }
        }
    });

## Callbacks

Get more control over the modal, mainly important for binding events for the modal elements.
contentLoaded callback is called when Ajax loading is used

    $.confirm({
        title: false,
        content: 'url:callback.html',
        onContentReady: function () {
            // when content is fetched & rendered in DOM
            alert('onContentReady');
            var self = this;
            this.buttons.ok.disable();
            this.$content.find('.btn').click(function(){
                self.$content.find('input').val('Chuck norris');
                self.buttons.ok.enable();
            });
        },
        contentLoaded: function(data, status, xhr){
            // when content is fetched
            alert('contentLoaded: ' + status);
        },
        onOpenBefore: function () {
            // before the modal is displayed.
            alert('onOpenBefore');
        },
        onOpen: function () {
            // after the modal is displayed.
            alert('onOpen');
        },
        onClose: function () {
            // before the modal is hidden.
            alert('onClose');
        },
        onDestroy: function () {
            // when the modal is removed from DOM
            alert('onDestroy');
        },
        onAction: function (btnName) {
            // when a button is clicked, with the button name
            alert('onAction: ' + btnName);
        },
        buttons: {
            ok: function(){

            }
        }
    });

## Global defaults

You can setup global settings for your jconfirm.

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

    jconfirm.defaults = {
        title: 'Hello',
        titleClass: '',
        type: 'default',
        typeAnimated: true,
        draggable: true,
        dragWindowGap: 15,
        dragWindowBorder: true,
        animateFromElement: true,
        smoothContent: true,
        content: 'Are you sure to continue?',
        buttons: {},
        defaultButtons: {
            ok: {
                action: function () {
                }
            },
            close: {
                action: function () {
                }
            },
        },
        contentLoaded: function(data, status, xhr){
        },
        icon: '',
        lazyOpen: false,
        bgOpacity: null,
        theme: 'light',
        animation: 'scale',
        closeAnimation: 'scale',
        animationSpeed: 400,
        animationBounce: 1,
        rtl: false,
        container: 'body',
        containerFluid: false,
        backgroundDismiss: false,
        backgroundDismissAnimation: 'shake',
        autoClose: false,
        closeIcon: null,
        closeIconClass: false,
        watchInterval: 100,
        columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',
        boxWidth: '50%',
        scrollToPreviousElement: true,
        scrollToPreviousElementAnimate: true,
        useBootstrap: true,
        offsetTop: 40,
        offsetBottom: 40,
        bootstrapClasses: {
            container: 'container',
            containerFluid: 'container-fluid',
            row: 'row',
        },
        onContentReady: function () {},
        onOpenBefore: function () {},
        onOpen: function () {},
        onClose: function () {},
        onDestroy: function () {},
        onAction: function () {}
    };

## Options

Options, their defaults, possibilities and explanations.

Name | Type | Default | Description
--- | --- | --- | ---
title | String, Function | `'Hello'` | Title of the dialog. Also accepts a function that returns a string.
titleClass | String | `''` | Class that will be applied to the title.
type | String | `'default'` | Colors the modal to give the user a hint of success/failure/warning, available options are: 'blue, green, red, orange, purple & dark'
typeAnimated | Boolean | `true` | Adds a little animation to the colors.
draggable | Boolean | `true` | Makes the dialog draggable, the drag point is the title of the model, if the title is not defined the model won't be draggable. alignMiddle is set to false, when using draggable.
dragWindowGap | Number | `15` | Draggable gap between the modal and window, defaults to 15px
dragWindowBorder | Boolean | `true` | If the modal should be restricted inside the window
animateFromElement | Boolean | `true` | Animates the modal from the clicked element
alignMiddle | Boolean | `true` | IMPORTANT `@deprecated` The model will be position in center of the screen. When the content in the model changes, the model is reposition itself.
smoothContent | Boolean | `true` | Smooth height transition when content in modal changes.
content | String, Function | `'Are you sure to continue?'` | Content for the dialog. Accepts functions that return string or ajax promise.
contentLoaded | Function | `function(data,status,xhr){}` | In use only when content is loaded via Ajax. is called on always callback of $.ajax
buttons | Object | `{}` | Multiple definition of buttons please see button definition for button properties
icon | String | `''` | Icon class prepended before the title. ex: 'fa fa-icon'
lazyOpen | Boolean | `false` | Does not open the modal instantly. requires to call the open() function to open the modal
bgOpacity | Float | `null` | if null, the theme's default bg opacity is applied.
theme | String | `'light'` | Color theme for the dialog. possible options are 'light', 'dark', 'material' & 'bootstrap'
animation | String | `'zoom'` | The Open animation for the dialog. possible options are right, left, bottom, top, rotate, none, opacity, scale, zoom, scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse) The 'blur' animation was removed in v1.1.2
closeAnimation | String | `'scale'` | The close animation for the dialog. Same options as animation.
animationSpeed | Number | `400` | Animation duration in milliseconds.
animationBounce | Float | `1` | Adds a Bounce open animation, 1 = No bounce
escapeKey | Boolean, String | `false` | if false, escapeKey wont work, if true, will work, but no callbacks, if string, will be assigned to button.
rtl | Boolean | `false` | Use the Right to left text layout.
container | String | `'body'` | Specify where the generated HTML content for jconfirm should append. By default it appends in the document's <body>.
containerFluid | Boolean | `false` | If true, will use the container-fluid layout, to use the full browser width.
backgroundDismiss | Boolean, String, Function | `false` | If false, user wont be able to exit by clicking out. If true, user will be able to click out, no callback. If string, will be assigned to button. If function, will be used as callback.
backgroundDismissAnimation | String | `'shake'` | Animation to perform to grab the user's attention when user clicks out of the box.
autoClose | String | `false` | Auto-close the dialog within a specified time, if the user doesn't respond. possible option `'buttonName|400'` the string is divided in two halves with pipe `'|'`, the first part specifies the button name to trigger. The other half specifies the wait time in milliseconds.
closeIcon | Boolean | `null` | By default closeIcon is visible if both buttons are false. (dialog mode). closeIcon can be shown by setting this value to true.
closeIconClass | String | `false` | By default jQuery confirm uses × html entity for this close symbol. You can provide icon class here to change it.
watchInterval | Number | `100` | Watch the modal for changes and is centered on screen. Added in v 2.5.0
columnClass | String | `'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1'` | Provides a better way to set Custom width and is responsive. You can also set custom widths for different display sizes using the Bootstraps grid.
useBootstrap | Boolean | `true` | if true, bootstrap classes will be set on the modal. 'columnClass' wil be set on the box. if false, bootstrap classes will not be set, instead 'boxWidth' will be set on the box.
boxWidth | String | `'50%'` | This options sets the width of the box, when you're not planning to use bootstrap in your project Will only work if 'useBootstrap' is set to false,
scrollToPreviousElement | Boolean | `true` | Scroll back to the element that was focused before jconfirm model opened.
scrollToPreviousElementAnimate | Boolean | `true` | Animates the scroll to previous element.
offsetTop | Number | `40` | The model will maintain at least 50px from the window's top.
offsetBottom | Number | `40` | The model will maintain at least 50px from the window's bottom.
bootstrapClasses | object | `{ container: 'container', containerFluid: 'container-fluid', row: 'row', }` | These are the default classes that are set when bootstrap is used, this option is available to folks who use namespaced bootstrap classes.
onContentReady | Function | `function(){}` | is called when the content is put in DOM and the modal is open. (When the modal is completed ready.)
onOpenBefore | Function | `function(){}` | is called when the modal is going to be opened.
onOpen | Function | `function(){}` | is called when the modal has finished opening.
onClose | Function | `function(){}` | is called when the modal is going to be closed.
onDestroy | Function | `function(){}` | is called after the modal element is removed from the DOM.
onAction | Function | `function(buttonName){}` | is called when any of the button is clicked. buttonName is provided as argument.

## Api

These are a few stuff, that will let you interact and make changes in your modal on run time.
The function `$.confirm()` returns an object on execution.

    var jc = $.confirm({
        title: 'awesome',
        onContentReady: function(){
            // this === jc
        }
    });

#### `jc.setTitle(title: string)`

`function`

Sets the title and overwrites jc.title

#### `jc.setIcon(iconClass: string)`

`function`

Sets the title and overwrites jc.title

#### `jc.setContent(content: string | jQuery)`

`function`

Sets the content and overwrites jc.content

#### `jc.setContentPrepend(content: string | jQuery)`

`function`

Prepends content to content.

#### `jc.setContentAppend(content: string | jQuery)`

`function`

Appends content to content

#### `jc.setType(typeClass: string)`

`function`

Sets a new type class

#### `jc.showLoading(disableButtons: boolean)`

`function`

Show loading spinner inside modal, disableButtons if set to true will disable the buttons.

#### `jc.hideLoading(enableButtons: boolean)`

`function`

Hide loading spinner inside modal, enableButtons if set to true will enable the buttons.

#### `jc.close() : boolean`

`function`

The close method closes/destroys the dialog.

#### `jc.open() : boolean`

`function`

Opens the modal again, if it is closed. (Added in v3.0.0)

#### `jc.toggle()`

`function`

Toggle between open and close modal

#### `jc.highlight()`

`function`

Trigger background dismiss animation

#### `jc.setBoxWidth(width: string)`

`function`

Set the box width of the modal. Only if useBootstrap is set to false

#### `jc.setColumnClass(className: string)`

`function`

Set the bootstrap column class of the modal. Only if useBootstrap is set to true

#### `jc.setTheme(themeName: string)`

`function`

Set the theme class of the modal.

#### `jc.isClosed() : boolean`

`function`

returns true if the modal is closed, else false.

#### `jc.isOpen() : boolean`

`function`

returns true if the modal is open, else false.

#### `jc.setDialogCenter()` `Deprecated`

`function`

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

#### `jc.buttons.<buttonName>.setText(text: string)`

`function`

Set text for a button

#### `jc.buttons.<buttonName>.addClass(className: string)`

`function`

Adds a class to the button

#### `jc.buttons.<buttonName>.removeClass(className: string)`

`function`

Removes class from the button

#### `jc.buttons.<buttonName>.disable()`

`function`

Disabled the button with attribute `disabled='disabled'`

#### `jc.buttons.<buttonName>.enable()`

`function`

Enables a previously disabled button

#### `jc.buttons.<buttonName>.hide()`

`function`

Hides the button using CSS 'display: none'

#### `jc.buttons.<buttonName>.show()`

`function`

Shows a previously hidden button

#### `jc.$body`

`jquery DOM element`

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

#### `jc.$content`

`jquery DOM element`

You can access your Dialogs contents via this object.

#### `jc.$title`

`jquery DOM element`

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

#### `jc.$icon`

`jquery DOM element`

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

#### `jc.$target`

`jquery DOM element`

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