/jquery.confirm

Confirm dialogs for buttons and links using jQuery and Bootstrap

Primary LanguageJavaScript

jquery.confirm

Confirm dialogs for buttons and links.

Requirements

If you use Bootstrap 2, you can use any 1.x version. From 2.0 and onwards, Bootstrap 3 is required.

Usage

<a href="home" class="confirm">Go to home</a>
$(".confirm").confirm();

Any click on the link will pop up a dialog asking the user to confirm the action.

Options

List of the options:

  • text: Text to display in the dialog
  • title: Title of the dialog (can be empty, the dialog will not have a header then)
  • confirm: Handler executed when the user confirms
  • cancel: Handler executed when the user cancels
  • confirmButton: Label of the confirm button
  • cancelButton: Label of the cancel button
  • post: If false (default) and no confirm handler is set, redirects the user to the URL of the button/link with a GET request. If true, redirects with a POST request (like a form submission).

Example:

<button class="confirm" type="button">Delete the comment</button>
$(".confirm").confirm({
    text: "Are you sure you want to delete that comment?",
    title: "Confirmation required",
    confirm: function(button) {
        delete();
    },
    cancel: function(button) {
        // nothing to do
    },
    confirmButton: "Yes I am",
    cancelButton: "No",
    post: true
});

Manual triggering

You can manually trigger the confirmation dialog:

// Will immediately show the confirmation popup
$.confirm({
    text: "Are you sure you want to delete that comment?",
    confirm: function() {
        delete();
    },
    cancel: function() {
        // nothing to do
    }
});

Change log

  • 2.0.0 Bootstrap 3 compatibility (thanks to @RusselVela)
  • 1.3.0 Minified version and specific modal CSS class (thanks to @mrjoelkemp)
  • 1.2.0 Bugfix when confirm() is applied to a collection of links
  • 1.1.0 Trigger the confirm dialog manually with $.confirm()
  • 1.0.0 First release