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.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/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

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

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

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

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.

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

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.

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

        }
    }
});

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

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

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

$.confirm({
    closeIcon: true
});

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

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

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.

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

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

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

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

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

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

Control what happens if the user clicks outside the modal.

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

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

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

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

        }
    }
});

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 () {

            }
        }
    }
});

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(){

        }
    }
});

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, their defaults, possibilities and explanations.