🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A lightweight and easy-to-use jQuery plugin which allows apply inline confirmation actions to any elements without messing with confirm dialogs.

confirmation-dialog confirm

Documentation

Inline Confirmation plugin for jQuery endorse

In a web app, it is very common to have actions that destroy (delete/remove) data. These actions, if you don’t already know, should always map to POST methods. On top of that, because these actions are destructive, the UI should always ask the user for confirmation.

But how do we actually implement the confirmation dialogue though? The vanilla JavaScript confirm box would be the easiest but at the same time the ugliest - this thing stalls most web browsers until the user acts on it.

An inline popup/modal box? Perhaps, but it is still obtrusive, in the sense that the popup/model boxes are usually in the way of other tasks.

Meet Inline Confirmation - a jQuery plugin for creating easy, less obtrusive confirmation dialogues!

Configuration

There are a few options to customise the behaviour of this plugin:

Option Type Description
confirm String The HTML for the confirm action (default: "<a href='#'>Confirm</a>").
cancel String The HTML for the cancel action (default: "<a href='#'>Cancel</a>").
separator String The HTML for the separator between the confirm and the cancel actions (default: " ").
reverse Boolean Revert the confirm and the cancel actions (default: false).
hideOriginalAction Boolean Whether or not to hide the original action, useful for display the dialogue as a modal if set to false (default: true).
bindsOnEvent String The JavaScript event handler for binding the confirmation action (default: "click").
expiresIn Integer Seconds before the confirmation dialogue closes automatically, 0 to disable this feature (default: 0).
confirmCallback Function The callback function to execute after the confirm action, accepts the original action object as an argument.
cancelCallback Function The callback function to execute after the cancel action, accepts the original action object as an argument.

Usage

// using default options $("a.delete").inlineConfirmation();  // using some custom options $("a.delete").inlineConfirmation({   confirm: "<a href='#' class='confirm-yes'>Yes</a>",   cancel: "<a href='#' class='confirm-no'>No</a>",   separator: " | ",   reverse: true,   bindsOnEvent: "hover",   confirmCallback: function(action) {     action.parent().fadeIn();   } });

Demo

Click here for a simple demo.

Changelog

v1.4.2 [2013-03-07]

  • Use jQuery 1.7+'s on() instead of the old live()

v1.4.1 [2011-07-30]

  • Fixed a bug where timeouts aren't being reset correctly.
  • Fixed a bug where the click handler executes the default link behaviour.

v1.4.0 [2011-06-28]

  • Added a demo and readme to the repository.

v1.3.1 [2010-08-04]

  • Fixed a regression bug that causes expiresIn to stop working.

v1.3.0 [2010-08-04]

  • Removed allowMultiple option as tracking multiple instances of the dialogues is not a good idea (the code was broken anyway).
  • Added the original action object as an argument to the callback functions.
  • Fixed a bug where original actions would disappear.

v1.2.0 [2010-08-04]

  • Added hideOriginalAction option.

v1.1.0 [2010-08-04]

  • Added allowMultiple option.

v1.0.0 [2010-08-03]

  • Initial release.

More jQuery Plugins

Check out my other jQuery plugins:

License

Copyright (c) 2010-2012 Fred Wu

Released under the MIT license.

Bitdeli Badge


You May Also Like